1、Vue 擴展插件：
*vue-cli: vue 腳手架
*vue-resource(axios): ajax 請求
*vue-router: 路由
*vuex: 狀態(tài)管理
*vue-lazyload: 圖片懶加載
*vue-scroller: 頁面滑動相關
*mint-ui: 基于 vue 的 UI 組件庫(移動端)
*element-ui: 基于 vue 的 UI 組件庫(PC 端)
*它本身只關注 UI, 可以輕松引入 vue 插件或其它第三方庫開發(fā)項目
2、雙大括號表達式
*語法:{{exp}}
*功能: 向頁面輸出數(shù)據(jù)
*可以調(diào)用對象的方法
3、強制數(shù)據(jù)綁定：指定變化的屬性值
寫法：v-bind:xxx='yyy'? //yyy 會作為表達式解析執(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 屬性對象中定義計算屬性的方法
*在頁面中使用{{方法名}}來顯示計算的結果
6、監(jiān)視屬性：
*通過通過 vm 對象的$watch()或 watch 配置來監(jiān)視指定的屬性
*當屬性變化時, 回調(diào)函數(shù)自動調(diào)用, 在函數(shù)內(nèi)部進行計算
7、計算屬性高級
*通過 getter/setter 實現(xiàn)對屬性數(shù)據(jù)的顯示和監(jiān)視
*計算屬性存在緩存, 多次讀取只執(zhí)行一次 getter 計算
8、class 與 style 綁定：class/style 綁定是專門用來實現(xiàn)動態(tài)樣式效果的技術
class綁定：*:class='xxx'
*表達式是字符串: 'classA'
*表達式是對象: {classA:isA, classB: isB}
*表達式是數(shù)組: ['classA', 'classB']
style綁定：:style="{ color: activeColor, fontSize: fontSize + 'px' }"（其中 activeColor/fontSize 是 data 屬性）
9、條件渲染：
指令：v-if 與 v-else及v-show
注意點：如果需要頻繁切換 v-show 較好
當條件不成立時, v-if 的所有子節(jié)點不會解析
10、列表渲染：
指令：數(shù)組: v-for / index ； 對象: v-for / key
更新顯示：刪除 item ； 替換 item
高級處理：列表過濾 ； 列表排序
11、事件處理：
綁定監(jiān)聽：*v-on:xxx="fun"
*@xxx="fun"
*@xxx="fun(參數(shù))"
*默認事件形參: event
*隱含屬性對象: $event
事件修飾符：*.prevent : 阻止事件的默認行為 event.preventDefault()
*.stop : 停止事件冒泡 event.stopPropagation()
按鍵修飾符：*.keycode : 操作的是某個 keycode 值的鍵
? ? *.keyName : 操作的某個按鍵名的鍵(少部分)
12、表單輸入綁定：
使用 v-model 對表單數(shù)據(jù)自動收集：text/textarea、checkbox、radio、select
13、vue生命周期分析：
-+-初始化顯示：*beforeCreate()、*created()、*beforeMount()、*mounted()
-+-更新狀態(tài)：this.xxx = value、*beforeUpdate()、*updated()
-+-銷毀vue實例：vm.$destory()、*beforeDestory()、*destoryed()
14、常用的生命周期方法：
*created()/mounted(): 發(fā)送 ajax 請求, 啟動定時器等異步任務
*beforeDestory(): 做收尾工作, 如: 清除定時器
15、常用內(nèi)置指令：
*v-text : 更新元素的 textContent
*v-html : 更新元素的 innerHTML
*v-if : 如果為 true, 當前標簽才會輸出到頁面
*v-else: 如果為 false, 當前標簽才會輸出到頁面
*v-show : 通過控制 display 樣式來控制顯示/隱藏
*v-for : 遍歷數(shù)組/對象
*v-on : 綁定事件監(jiān)聽, 一般簡寫為@
*v-bind : 強制綁定解析表達式, 可以省略 v-bind 簡寫為：
*v-model : 雙向數(shù)據(jù)綁定
*ref : 指定唯一標識, vue 對象通過$refs 屬性訪問這個元素對象
*v-cloak : 防止閃現(xiàn), 與 css 配合: [v-cloak] { display: none }
16、自定義指令：
*注冊全局指令：
Vue.directive('my-directive', function(el, binding){ el.innerHTML = binding.value.toupperCase()
})
或
// 注冊一個全局自定義指令 `v-focus`
Vue.directive('focus', {
? // 當被綁定的元素插入到 DOM 中時……
? inserted: function (el) {
? ? // 聚焦元素
? ? el.focus()
}
})
*注冊局部指令：
directives : {
'my-directive' : {
bind (el, binding) {
el.innerHTML = binding.value.toupperCase()
}
}
}
*使用指令：
v-my-directive='xxx'
