1、Vue 擴展插件:
*vue-cli: vue 腳手架
*vue-resource(axios): ajax 請求
*vue-router: 路由
*vuex: 狀態(tài)管理
*vue-lazyload: 圖片懶加載
*vue-scroller: 頁面滑動相關(guān)
*mint-ui: 基于 vue 的 UI 組件庫(移動端)
*element-ui: 基于 vue 的 UI 組件庫(PC 端)
*它本身只關(guān)注 UI, 可以輕松引入 vue 插件或其它第三方庫開發(fā)項目
2边涕、雙大括號表達(dá)式
*語法:{{exp}}
*功能: 向頁面輸出數(shù)據(jù)
*可以調(diào)用對象的方法
3晤碘、強制數(shù)據(jù)綁定:
指定變化的屬性值
寫法:v-bind:xxx='yyy'?? //yyy 會作為表達(dá)式解析執(zhí)行
簡介寫法::xxx='yyy'
4、綁定事件監(jiān)聽:
綁定指定之間名的回調(diào)函數(shù)
完整寫法:v-on:keyup='xxx'
v-on:keyup='xxx(參數(shù))' v-on:keyup.enter='xxx'
簡潔寫法:@keyup='xxx' @keyup.enter='xxx'
5功蜓、計算屬性:
*在 computed 屬性對象中定義計算屬性的方法
*在頁面中使用{{方法名}}來顯示計算的結(jié)果
6园爷、監(jiān)視屬性:
*通過通過 vm 對象的$watch()或 watch 配置來監(jiān)視指定的屬性
*當(dāng)屬性變化時, 回調(diào)函數(shù)自動調(diào)用, 在函數(shù)內(nèi)部進(jìn)行計算
7、計算屬性高級
*通過 getter/setter 實現(xiàn)對屬性數(shù)據(jù)的顯示和監(jiān)視
*計算屬性存在緩存, 多次讀取只執(zhí)行一次 getter 計算
8式撼、class 與 style 綁定:
class/style 綁定是專門用來實現(xiàn)動態(tài)樣式效果的技術(shù)
class綁定:*:class='xxx'
*表達(dá)式是字符串: 'classA'
*表達(dá)式是對象: {classA:isA, classB: isB}
*表達(dá)式是數(shù)組: ['classA', 'classB']
style綁定::style="{ color: activeColor, fontSize: fontSize + 'px' }"(其中 activeColor/fontSize 是 data 屬性)
9童社、條件渲染:
指令:v-if 與 v-else及v-show
注意點:如果需要頻繁切換 v-show 較好
當(dāng)條件不成立時, v-if 的所有子節(jié)點不會解析
10、列表渲染:
指令:數(shù)組: v-for / index 著隆; 對象: v-for / key
更新顯示:刪除 item 扰楼; 替換 item
高級處理:列表過濾 呀癣; 列表排序