1.基本綁定：
new Vue(
{
el:’#elID’,
data:{
// data obj
},
computed:{
// computed obj
},
methods:{
// methods obj
},
}
);
2.指令：
前綴爲v-
*v-if, v-for, v-bind, v-on…
*特性插值會轉爲v-bind綁定: href=’{{url}}’ –> v-bind:href=’url’
3.數據綁定只接受單個表達式：
{{number+1}} ok
{{ok?’yes’:’no’}} ok
{{message.split(”).reverse().join(”)}} ok
{{var a=1}} no
{{if(ok){return message}}} no
4.過濾器：
管道式的寫法 –> {{message|capitalize}}
*可以串聯: filterA|filterB
*可以帶參數: filterA ‘arg1’ arg2
5.修飾符
前綴爲.
*v-bind:href.literal=’a/b/c’
6.縮寫
v-bind:href=’url’ –> :href=’url’
v-on:click=’dosomething’ –> @click=’dosomething’
7.計算setter
computed:{
fullName:{
get:function(){
// getter
}
set:function(newValue){
//setter
}
}
}
8.Class與Style綁定
*變量語法：v-bind:class=”{‘class-a’:isA, ‘class-b’:isB}” –> data:{isA:true, isB:false}
*對象語法：v-bind:class=”classObj” –> data:{classObj:{‘class-a’:true, ‘class-b’:false}}
*數組語法：v-bind:class=’[classA, classB]’ –> data:{classA:’class-a’, classB:’class-b’}
9.條件渲染
*v-if, v-show, v-else
*
Yes
No
*
Yes
No
*show只是簡單的display:none
10.列表渲染
v-for
*內置變量：{{$index}}
*用法：v-for=’item in items’
v-for=’(index, item) in items’ *數組則是索引，遍歷對象則是鍵
11.數組變動檢測
能觸發視圖更新的方法：
*push, pop, shift, unshift, splice, sort, reverse // 變異方法
*filter, concat, slice // 替換數組
*儘可能複用DOM: track-by
v-for=”item in items” track-by=”_uid”
track-by=’$index’ // 根據index追蹤，不是很明白！…片段不被移動，簡單地已對應索引的新值刷新,也能處理數據數組中重複的值…
不能檢測到以下變化：
1.直接用索引設置元素： vm.items[0]={}; // vue解決方案：vm.items.$set(0, { childMsg: 'Changed!'}), vm.items.$remove(item)
2.修改數據的長度： vm.items.length=0; // js中常見的清空, vue解決方案：直接用空數組替換
12.對象v-for
內置變量：$key
13.值域v-for
{{ n }}
14.內置的過濾器
filterBy 和 orderBy
15.方法與事件處理器
·v-on 監聽DOM事件