1.1.1. 官網(wǎng)

1）英文官網(wǎng): https://vuejs.org/

2）中文官網(wǎng): https://cn.vuejs.org/

1.1.2. 介紹描述

1）漸進(jìn)式 JavaScript 框架

2）作者: 尤雨溪(一位華裔前 Google 工程師)

3）作用: 動(dòng)態(tài)構(gòu)建用戶界面

1.1.3. Vue 的特點(diǎn)

1）遵循 MVVM 模式

2）編碼簡(jiǎn)潔, 體積小, 運(yùn)行效率高, 適合移動(dòng)/PC 端開發(fā)

3）它本身只關(guān)注 UI, 可以輕松引入 vue 插件或其它第三方庫(kù)開發(fā)項(xiàng)目

1.1.4. 與其它前端 JS 框架的關(guān)聯(lián)

1）借鑒 angular 的模板和數(shù)據(jù)綁定技術(shù)

2）借鑒 react 的組件化和虛擬 DOM 技術(shù)

1.1.5. Vue 擴(kuò)展插件

1）vue-cli: vue 腳手架

2）vue-resource(axios): ajax 請(qǐng)求

3）vue-router: 路由

4）vuex: 狀態(tài)管理

5）vue-lazyload: 圖片懶加載

6）vue-scroller: 頁(yè)面滑動(dòng)相關(guān)

7）mint-ui: 基于 vue 的 UI 組件庫(kù)(移動(dòng)端)

8）element-ui: 基于 vue 的 UI 組件庫(kù)(PC 端)

9）它本身只關(guān)注 UI, 可以輕松引入 vue 插件或其它第三方庫(kù)開發(fā)項(xiàng)目

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

1.3. 模板語(yǔ)法

1.3.1. 模板的理解

1）動(dòng)態(tài)的 html 頁(yè)面

2）包含了一些 JS 語(yǔ)法代碼

a.雙大括號(hào)表達(dá)式

b.指令(以 v-開頭的自定義標(biāo)簽屬性)

1.3.2. 雙大括號(hào)表達(dá)式

1）語(yǔ)法: {{exp}}

2）功能: 向頁(yè)面輸出數(shù)據(jù)

3）可以調(diào)用對(duì)象的方法

1.3.3. 指令一: 強(qiáng)制數(shù)據(jù)綁定

1）功能: 指定變化的屬性值

2）完整寫法:

v-bind:xxx='yyy'    //yyy 會(huì)作為表達(dá)式解析執(zhí)行

3）簡(jiǎn)潔寫法:

: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）簡(jiǎn)潔寫法:

@keyup='xxx' @keyup.enter='xxx'

1.4. 計(jì)算屬性和監(jiān)視

1.4.1. 計(jì)算屬性

1）在 computed 屬性對(duì)象中定義計(jì)算屬性的方法

2）在頁(yè)面中使用{{方法名}}來(lái)顯示計(jì)算的結(jié)果

1.4.2. 監(jiān)視屬性

1）通過(guò)通過(guò) vm 對(duì)象的$watch()或 watch 配置來(lái)監(jiān)視指定的屬性

2）當(dāng)屬性變化時(shí), 回調(diào)函數(shù)自動(dòng)調(diào)用, 在函數(shù)內(nèi)部進(jìn)行計(jì)算

1.4.3. 計(jì)算屬性高級(jí)

1）通過(guò) getter/setter 實(shí)現(xiàn)對(duì)屬性數(shù)據(jù)的顯示和監(jiān)視

2）計(jì)算屬性存在緩存, 多次讀取只執(zhí)行一次 getter 計(jì)算

1.5. class 與 style 綁定

1.5.1. 理解

1）在應(yīng)用界面中, 某個(gè)(些)元素的樣式是變化的

2）class/style 綁定就是專門用來(lái)實(shí)現(xiàn)動(dòng)態(tài)樣式效果的技術(shù)

1.5.2. class 綁定

1）:class='xxx'

2）表達(dá)式是字符串: 'classA'

3）表達(dá)式是對(duì)象: {classA:isA, classB: isB}

4）表達(dá)式是數(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）當(dāng)條件不成立時(shí), v-if 的所有子節(jié)點(diǎn)不會(huì)解析

1.7. 列表渲染

1.7.1. 列表顯示指令

數(shù)組: v-for / index

對(duì)象: v-for / key

1.7.2. 列表的更新顯示

刪除 item

替換 item

1.7.3. 列表的高級(jí)處理

列表過(guò)濾

列表排序

1.8. 事件處理

1.8.1. 綁定監(jiān)聽:

1）v-on:xxx="fun"

2）@xxx="fun"

3）@xxx="fun(參數(shù))"

4）默認(rèn)事件形參: event

5）隱含屬性對(duì)象: $event

1.8.2. 事件修飾符

1）.prevent : 阻止事件的默認(rèn)行為 event.preventDefault()

2）.stop : 停止事件冒泡 event.stopPropagation()

1.8.3. 按鍵修飾符

1）.keycode : 操作的是某個(gè) keycode 值的鍵

2）.keyName : 操作的某個(gè)按鍵名的鍵(少部分)

1.9. 表單輸入綁定

1.9.1. 使用 v-model 對(duì)表單數(shù)據(jù)自動(dòng)收集

1）text/textarea

2）checkbox

3）radio

4）select

1.10. Vue 實(shí)例生命周期

1.10.1. 生命周期流程圖

[圖片上傳失敗...(image-b1d197-1538957763886)]

1.10.2. vue 生命周期分析

1）初始化顯示

*beforeCreate()

*created()

*beforeMount()

*mounted()

2）更新狀態(tài): this.xxx = value

*beforeUpdate()

*updated()

3）銷毀 vue 實(shí)例: vm.$destory()

*beforeDestory()

*destoryed()

1.10.3. 常用的生命周期方法

1）created()/mounted(): 發(fā)送 ajax 請(qǐng)求, 啟動(dòng)定時(shí)器等異步任務(wù)

2）beforeDestory(): 做收尾工作, 如: 清除定時(shí)器

1.11. 過(guò)渡&動(dòng)畫

1.11.1. vue 動(dòng)畫的理解

1）操作 css 的 trasition 或 animation

2）vue 會(huì)給目標(biāo)元素添加/移除特定的 class

3）過(guò)渡的相關(guān)類名

xxx-enter-active: 指定顯示的 transition

xxx-leave-active: 指定隱藏的 transition

xxx-enter/xxx-leave-to: 指定隱藏時(shí)的樣式

[圖片上傳失敗...(image-551490-1538957763886)]

1.11.2. 基本過(guò)渡動(dòng)畫的編碼

1）在目標(biāo)元素外包裹<transition name="xxx" style="-webkit-font-smoothing: antialiased; box-sizing: border-box; -webkit-tap-highlight-color: transparent; text-size-adjust: none; font-size: inherit;"></transition>

2）定義 class 樣式

指定過(guò)渡樣式: transition

指定隱藏時(shí)的樣式: opacity/其它

1.12. 過(guò)濾器

1.12.1. 理解過(guò)濾器

1）功能: 對(duì)要顯示的數(shù)據(jù)進(jìn)行特定格式化后再顯示

2）注意: 并沒有改變?cè)镜臄?shù)據(jù), 可是產(chǎn)生新的對(duì)應(yīng)的數(shù)據(jù)

1.12.2. 定義和使用過(guò)濾器

1）定義過(guò)濾器

Vue.filter(filterName, function(value[,arg1,arg2,...]){
    // 進(jìn)行一定的數(shù)據(jù)處理
    return newValue
})

2）使用過(guò)濾器

<div>{{myData | filterName}}</div>
<div>{{myData | filterName(arg)}}</div>

1.13. 內(nèi)置指令與自定義指令

1.13.1. 常用內(nèi)置指令

1）v:text : 更新元素的 textContent

2）v-html : 更新元素的 innerHTML

3）v-if : 如果為 true, 當(dāng)前標(biāo)簽才會(huì)輸出到頁(yè)面

4）v-else: 如果為 false, 當(dāng)前標(biāo)簽才會(huì)輸出到頁(yè)面

5）v-show : 通過(guò)控制 display 樣式來(lái)控制顯示/隱藏

6）v-for : 遍歷數(shù)組/對(duì)象

7）v-on : 綁定事件監(jiān)聽, 一般簡(jiǎn)寫為@

8）v-bind : 強(qiáng)制綁定解析表達(dá)式, 可以省略 v-bind

9）v-model : 雙向數(shù)據(jù)綁定

10）ref : 指定唯一標(biāo)識(shí), vue 對(duì)象通過(guò)$els 屬性訪問(wèn)這個(gè)元素對(duì)象

11）v-cloak : 防止閃現(xiàn), 與 css 配合: [v-cloak] { display: none }

1.13.2. 自定義指令

1）注冊(cè)全局指令

Vue.directive('my-directive', function(el, binding){ el.innerHTML = binding.value.toupperCase()
})

2）注冊(cè)局部指令

directives : {
    'my-directive' : {
        bind (el, binding) {
            el.innerHTML = binding.value.toupperCase()
        }
    }
}

3）使用指令

v-my-directive='xxx'

1.14. 自定義插件

1.14.1. 說(shuō)明

1）Vue 插件是一個(gè)包含 install 方法的對(duì)象

2）通過(guò) install 方法給 Vue 或 Vue 實(shí)例添加方法, 定義全局指令等