vue入門總結（2）
1.App.vue檔案裡面的資料繫結：
<template>
<ul>
<li v-for="(todos,index) in todos" :id="index">
<label>{{index + 1}}.{{todos.value}}</label>
</li>
</ul>
</template>
<script>
export default {
data(){
return {
title:'vue-todos',
todos:[
{value:"閱讀一本關於前端開發的書",done:false},
{value:"補充範例程式碼",done:true},
{value:“寫心得”，done:false}
]
}
}
</script>
2.less寫樣式應如何處理
<style scoped lang="less"></style>
3.在前臺程式中，經常會用到標記active與no_active狀態，在vue中你就可以直接用變數來標記
例子：<li :class="{'checked':todos.done}"></li>
4.過濾器
在上面data那裡新增一個欄位：created:date.now()，
<template>
<ul>
<li v-for="(todos,index) in todos" :id="index">
<label>{{index + 1}}.{{todos.value}}</label>
<time>{{todos.created}}</time>
</li>
</ul>
</template>
<script>
export default {
data(){
return {
title:'vue-todos',
todos:[
{value:"閱讀一本關於前端開發的書",done:false,created:Date.now()},
{value:"補充範例程式碼",done:true,created:Date.now()},
{value:“寫心得”，done:false,created:Date.now()}
]
}
}
</script>
此時顯示的是時間戳，要把時間戳變成具體你想要的效果，需要引入包moment（這是專門管理時間的工具）
通過npm安裝後
import moment from 'moment'
import 'moment/locale/zh-cn'
moment.locale('zh-cn')
以上三項記得放在script標籤裡面
然後往該元件中加入
<template>
<ul>
<li v-for="(todos,index) in todos" :id="index"?
<label>{{index + 1}}.{{todos.value}}</label>
<time>{{todos.created | date}}</time>
</li>
</ul>
</template>
<script>
export default {
data(){
return {
title:'vue-todos',
todos:[
{value:"閱讀一本關於前端開發的書",done:false,created:Date.now()},
{value:"補充範例程式碼",done:true,created:Date.now()},
{value:“寫心得”，done:false,created:Date.now()}
]
}
}，
filters:{
date(val){
return moment(val).calendar()
}
}
</script>