模板的理解
1動態(tài)的 html 頁面
2包含了一些 JS 語法代碼
a.雙大括號表達式
b.指令(以 v-開頭的自定義標簽屬性)
雙大括號表達式
1語法: {{exp}}
2功能: 向頁面輸出數(shù)據(jù)
3可以調(diào)用對象的方法
指令一: 強制數(shù)據(jù)綁定
1功能: 指定變化的屬性值
2完整寫法:
v-bind:xxx='yyy' //yyy 會作為表達式解析執(zhí)行
3簡潔寫法:
:xxx='yyy'
?指令二: 綁定事件監(jiān)聽
1功能: 綁定指定事件名的回調(diào)函數(shù)
2完整寫法:
v-on:keyup='xxx'
v-on:keyup='xxx(參數(shù))' v-on:keyup.enter='xxx'
3簡潔寫法:
@keyup='xxx' @keyup.enter='xxx'
計算屬性和監(jiān)視
計算屬性
1在 computed 屬性對象中定義計算屬性的方法
2在頁面中使用{{方法名}}來顯示計算的結(jié)果
監(jiān)視屬性
1通過通過 vm 對象的$watch()或 watch 配置來監(jiān)視指定的屬性
2當屬性變化時, 回調(diào)函數(shù)自動調(diào)用, 在函數(shù)內(nèi)部進行計算
計算屬性高級
1通過 getter/setter 實現(xiàn)對屬性數(shù)據(jù)的顯示和監(jiān)視
2計算屬性存在緩存, 多次讀取只執(zhí)行一次 getter 計算
class 與 style 綁定
理解
1在應用界面中, 某個(些)元素的樣式是變化的
2class/style 綁定就是專門用來實現(xiàn)動態(tài)樣式效果的技術
class 綁定
1:class='xxx'
2表達式是字符串: 'classA'
3表達式是對象: {classA:isA, classB: isB}
4表達式是數(shù)組: ['classA', 'classB']
style 綁定
1:style="{ color: activeColor, fontSize: fontSize + 'px' }"
2其中 activeColor/fontSize 是 data 屬性
條件渲染
條件渲染指令
1v-if 與 v-else
2v-show
