1.1.3. Vue 的特點
1）遵循 MVVM 模式
2）編碼簡潔, 體積小, 運行效率高, 適合移動/PC 端開發(fā)
3）它本身只關(guān)注 UI, 可以輕松引入 vue 插件或其它第三方庫開發(fā)項目
1.1.4. 與其它前端 JS 框架的關(guān)聯(lián)
1）借鑒 angular 的模板和數(shù)據(jù)綁定技術(shù)
2）借鑒 react 的組件化和虛擬 DOM 技術(shù)
1.1.5. Vue 擴展插件
1）vue-cli: vue 腳手架
2）vue-resource(axios): ajax 請求
3）vue-router: 路由
4）vuex: 狀態(tài)管理
5）vue-lazyload: 圖片懶加載
6）vue-scroller: 頁面滑動相關(guān)
7）mint-ui: 基于 vue 的 UI 組件庫(移動端)
8）element-ui: 基于 vue 的 UI 組件庫(PC 端)
9）它本身只關(guān)注 UI, 可以輕松引入 vue 插件或其它第三方庫開發(fā)項目
1.2. Vue 的基本使用
1.2.1. 編碼
<div id="app">
<input type="text" v-model="username">
<p>Hello, {{username}}</p>
</div>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
new Vue({
el: '#app',
data: {
username: 'vue'
}
})
</script>
1.2.2. 使用 vue 開發(fā)者工具調(diào)試
安裝vue-devtools.crx（v_4.1.3）
1.2.3. 理解 Vue 的 MVVM
[圖片上傳失敗...(image-b30294-1538092229252)]
1.3. 模板語法
1.3.1. 模板的理解
1）動態(tài)的 html 頁面
2）包含了一些 JS 語法代碼
a.雙大括號表達式
b.指令(以 v-開頭的自定義標簽屬性)
1.3.2. 雙大括號表達式
1）語法: {{exp}}
2）功能: 向頁面輸出數(shù)據(jù)
3）可以調(diào)用對象的方法
1.3.3. 指令一: 強制數(shù)據(jù)綁定
1）功能: 指定變化的屬性值
2）完整寫法:
v-bind:xxx='yyy' //yyy 會作為表達式解析執(zhí)行
3）簡潔寫法:
:xxx='yyy'
1.3.4. 指令二: 綁定事件監(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'
1.4. 計算屬性和監(jiān)視
1.4.1. 計算屬性
1）在 computed 屬性對象中定義計算屬性的方法
2）在頁面中使用{{方法名}}來顯示計算的結(jié)果
1.4.2. 監(jiān)視屬性
1）通過通過 vm 對象的$watch()或 watch 配置來監(jiān)視指定的屬性
2）當屬性變化時, 回調(diào)函數(shù)自動調(diào)用, 在函數(shù)內(nèi)部進行計算
1.4.3. 計算屬性高級
1）通過 getter/setter 實現(xiàn)對屬性數(shù)據(jù)的顯示和監(jiān)視
2）計算屬性存在緩存, 多次讀取只執(zhí)行一次 getter 計算
1.5. class 與 style 綁定
1.5.1. 理解
1）在應(yīng)用界面中, 某個(些)元素的樣式是變化的
2）class/style 綁定就是專門用來實現(xiàn)動態(tài)樣式效果的技術(shù)
1.5.2. class 綁定
1）:class='xxx'
2）表達式是字符串: 'classA'
3）表達式是對象: {classA:isA, classB: isB}
4）表達式是數(shù)組: ['classA', 'classB']
1.5.3. style 綁定
1）:style="{ color: activeColor, fontSize: fontSize + 'px' }"
2）其中 activeColor/fontSize 是 data 屬性
