1. 指令是什麼？
指令(Directives) 是帶有 v- 前綴的特殊 attribute 。指令的職責是，當表達式的值改變時，將其產生的連帶影響，響應式地作用於 DOM 。
常見的指令有：v-model, v-if, v-for 等。
2. 指令參數
一個指令能夠接受一個 “參數” ，在指令名稱之後以冒號表示。如：
<p v-if="seen">現在你看到我了</p>
v-if 指令是用來控制 DOM 節點的插入或移除，在示例中 seen 就是 v-if 指令的參數。v-if 根據參數 seen 的值的 true/false 來插入或移除 <p> 節點。
當然指令的參數不是必須的。
3. 內置指令
在Vue中提供了非常多的內置指令：
- v-text
- v-html
- v-show
- v-if
- v-else
- v-else-if
- v-for
- v-on
- v-bind
- v-model
- v-slot
- v-pre
- v-cloak
- v-once
這次指令在日常的開發工作中大部分是經常用到的。
4. 自定義指令
在官方文檔中，指令自定義給出的示例是 v-focus, 通過此自定義指令，實現元素的聚焦。
// 註冊一個全局自定義指令 `v-focus`
Vue.directive('focus', {
// 當被綁定的元素插入到 DOM 中時……
inserted: function (el) {
// 聚焦元素
el.focus()
}
})
指令的註冊方式分爲兩種：
- 全局註冊
- 局部註冊
4.1. 全局註冊
全局註冊指令，可以在當前項目的任何組件中直接使用。上面的示例中，就是採用全局註冊的方式。
4.2. 局部註冊
局部註冊指令，指令註冊後，只能在當前組件中使用，在其他組件中無法使用該指令。
在組件中，提供有 directives 選項，該選項用來註冊局部指令：
directives: {
focus: {
// 指令的定義
inserted: function (el) {
el.focus()
}
}
}
4.3. 使用
註冊完組件後，我們就可以在DOM中進行使用該指令：
<input v-focus>
需要注意的是，我們註冊指令的時候是使用的 focus , 在使用指令時需要增加 v- 前綴。
5. 鉤子函數
在上面的自定義示例中，可以看到 inserted屬性，在這裏 inserted 稱爲鉤子函數。
在Vue中，指令定義對象提供瞭如下幾個鉤子函數
bind：只調用一次，指令第一次綁定到元素時調用。在這裏可以進行一次性的初始化設置。inserted：被綁定元素插入父節點時調用（僅保證父節點存在，但不一定已被插入文檔中）。update：所在組件的VNode更新時調用，但是可能發生在其VNode更新之前。指令的值可能發生了改變，也可能沒有。componentUpdated：指令所在組件的 VNode 及其子 VNode 全部更新後調用。unbind：只調用一次，指令與元素解綁時調用。
鉤子函數提供了固定的參數，詳細見官網：