Vue.js（讀音 /vju?/, 類似于 view） 是一套構建用戶界面的漸進式框架。
Vue 只關注視圖層灾搏， 采用自底向上增量開發(fā)的設計挫望。
Vue 的目標是通過盡可能簡單的 API 實現(xiàn)響應的數(shù)據綁定和組合的視圖組件。
1.1. Vue 的基本認識
1.1.1. 官網
1）英文官網: https://vuejs.org/
2）中文官網: https://cn.vuejs.org/
1.1.2. 介紹描述
1）漸進式 JavaScript 框架
2）作者: 尤雨溪(一位華裔前 Google 工程師)
3）作用: 動態(tài)構建用戶界面
1.1.3. Vue 的特點
1）遵循 MVVM 模式
2）編碼簡潔, 體積小, 運行效率高, 適合移動/PC 端開發(fā)
3）它本身只關注 UI, 可以輕松引入 vue 插件或其它第三方庫開發(fā)項目
1.1.4. 與其它前端 JS 框架的關聯(lián)
1）借鑒 angular 的模板和數(shù)據綁定技術
2）借鑒 react 的組件化和虛擬 DOM 技術
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: 頁面滑動相關
7）mint-ui: 基于 vue 的 UI 組件庫(移動端)
8）element-ui: 基于 vue 的 UI 組件庫(PC 端)
9）它本身只關注 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ā)者工具調試
安裝vue-devtools.crx（v_4.1.3）
1.2.3. 理解 Vue 的 MVVM
1.3. 模板語法
1.3.1. 模板的理解
1）動態(tài)的 html 頁面
2）包含了一些 JS 語法代碼
a.雙大括號表達式
b.指令(以 v-開頭的自定義標簽屬性)
1.3.2. 雙大括號表達式
1）語法: {{exp}}
2）功能: 向頁面輸出數(shù)據
3）可以調用對象的方法
1.3.3. 指令一: 強制數(shù)據綁定
1）功能: 指定變化的屬性值
2）完整寫法:
v-bind:xxx='yyy' //yyy 會作為表達式解析執(zhí)行
3）簡潔寫法:
:xxx='yyy'
1.3.4. 指令二: 綁定事件監(jiān)聽
1）功能: 綁定指定事件名的回調函數(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）在頁面中使用{{方法名}}來顯示計算的結果
1.4.2. 監(jiān)視屬性
1）通過通過 vm 對象的$watch()或 watch 配置來監(jiān)視指定的屬性
2）當屬性變化時, 回調函數(shù)自動調用, 在函數(shù)內部進行計算
1.4.3. 計算屬性高級
1）通過 getter/setter 實現(xiàn)對屬性數(shù)據的顯示和監(jiān)視
2）計算屬性存在緩存, 多次讀取只執(zhí)行一次 getter 計算
1.5. class 與 style 綁定
1.5.1. 理解
1）在應用界面中, 某個(些)元素的樣式是變化的
2）class/style 綁定就是專門用來實現(xiàn)動態(tài)樣式效果的技術
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 屬性
1.6. 條件渲染
1.6.1. 條件渲染指令
1）v-if 與 v-else
2）v-show
1.6.2. 比較 v-if 與 v-show
3）如果需要頻繁切換 v-show 較好
4）當條件不成立時, v-if 的所有子節(jié)點不會解析
1.7. 列表渲染
1.7.1. 列表顯示指令
數(shù)組: v-for / index
對象: v-for / key
1.7.2. 列表的更新顯示
刪除 item
替換 item
1.7.3. 列表的高級處理
列表過濾
列表排序
1.8. 事件處理
1.8.1. 綁定監(jiān)聽:
1）v-on:xxx="fun"
2）@xxx="fun"
3）@xxx="fun(參數(shù))"
4）默認事件形參: event
5）隱含屬性對象: $event
1.8.2. 事件修飾符
1）.prevent : 阻止事件的默認行為 event.preventDefault()
2）.stop : 停止事件冒泡 event.stopPropagation()
1.8.3. 按鍵修飾符
1）.keycode : 操作的是某個 keycode 值的鍵
2）.keyName : 操作的某個按鍵名的鍵(少部分)
1.9. 表單輸入綁定
1.9.1. 使用 v-model 對表單數(shù)據自動收集
1）text/textarea
2）checkbox
3）radio
4）select
1.10. Vue 實例生命周期
1.10.1. 生命周期流程圖
1.10.2. vue 生命周期分析
1）初始化顯示
*beforeCreate()
*created()
*beforeMount()
*mounted()
2）更新狀態(tài): this.xxx = value
*beforeUpdate()
*updated()
3）銷毀 vue 實例: vm.$destory()
*beforeDestory()
*destoryed()
1.10.3. 常用的生命周期方法
1）created()/mounted(): 發(fā)送 ajax 請求, 啟動定時器等異步任務
2）beforeDestory(): 做收尾工作, 如: 清除定時器
1.11. 過渡&動畫
1.11.1. vue 動畫的理解
1）操作 css 的 trasition 或 animation
2）vue 會給目標元素添加/移除特定的 class
3）過渡的相關類名
xxx-enter-active: 指定顯示的 transition
xxx-leave-active: 指定隱藏的 transition
xxx-enter/xxx-leave-to: 指定隱藏時的樣式
[圖片上傳失敗...(image-8fdcbb-1538225396526)]
1.11.2. 基本過渡動畫的編碼
1）在目標元素外包裹<transition name="xxx"></transition>
2）定義 class 樣式
指定過渡樣式: transition
指定隱藏時的樣式: opacity/其它
1.12. 過濾器
1.12.1. 理解過濾器
1）功能: 對要顯示的數(shù)據進行特定格式化后再顯示
2）注意: 并沒有改變原本的數(shù)據, 可是產生新的對應的數(shù)據
1.12.2. 定義和使用過濾器
1）定義過濾器
Vue.filter(filterName, function(value[,arg1,arg2,...]){
// 進行一定的數(shù)據處理
return newValue
})
2）使用過濾器
<div>{{myData | filterName}}</div>
<div>{{myData | filterName(arg)}}</div>
1.13. 內置指令與自定義指令
1.13.1. 常用內置指令
1）v:text : 更新元素的 textContent
2）v-html : 更新元素的 innerHTML
3）v-if : 如果為 true, 當前標簽才會輸出到頁面
4）v-else: 如果為 false, 當前標簽才會輸出到頁面
5）v-show : 通過控制 display 樣式來控制顯示/隱藏
6）v-for : 遍歷數(shù)組/對象
7）v-on : 綁定事件監(jiān)聽, 一般簡寫為@
8）v-bind : 強制綁定解析表達式, 可以省略 v-bind
9）v-model : 雙向數(shù)據綁定
10）ref : 指定唯一標識, vue 對象通過$els 屬性訪問這個元素對象
11）v-cloak : 防止閃現(xiàn), 與 css 配合: [v-cloak] { display: none }
1.13.2. 自定義指令
1）注冊全局指令
Vue.directive('my-directive', function(el, binding){ el.innerHTML = binding.value.toupperCase()
})
2）注冊局部指令
directives : {
'my-directive' : {
bind (el, binding) {
el.innerHTML = binding.value.toupperCase()
}
}
}
3）使用指令
v-my-directive='xxx'
1.14. 自定義插件
1.14.1. 說明
1）Vue 插件是一個包含 install 方法的對象
2）通過 install 方法給 Vue 或 Vue 實例添加方法, 定義全局指令等
