## 自定義指令鉤子函數
一個**指令定義對象**可以提供如下幾個鉤子函數 (均為可選)：
* bind:只調用一次，指令第一次綁定到元素時候調用。在這個鉤子函數中可以進行一次性的初始化設置；
* inserted:該鉤子函數在被綁定元素插入父節點時候調用；
* update:所在組件的VNode更新時候調用，（可能發生在其子VNode更新之前，指令的值可能發生了改變，也可能沒有改變）
* componentUpdated:指令所在組件的VNode及其子VNode全部更新以后調用
* unbind:只調用一次，指令與元素解綁時調用
## 自定義指令鉤子函數參數
（el,binding,vnode,oldVnode）
* el：指令所綁定的元素，可以用來直接操作 DOM 。
* binding：一個對象，包含以下屬性：
* name：指令名，不包括 v- 前綴。
* value：指令的綁定值，例如：v-my-directive="1 + 1" 中，綁定值為 2。
* oldValue：指令綁定的前一個值，僅在 update 和 componentUpdated 鉤子中可用。無論值是否改變都可用。
* expression：字符串形式的指令表達式。例如 v-my-directive="1 + 1" 中，表達式為 "1 + 1"。
* arg：傳給指令的參數，可選。例如 v-my-directive:foo 中，參數為 "foo"。
* modifiers：一個**包含修飾符的對象**。例如：v-my-directive.foo.bar 中，修飾符對象為 { foo: true, bar: true }。
* vnode：Vue 編譯生成的虛擬節點。移步 VNode API 來了解更多詳情。
* oldVnode：上一個虛擬節點，僅在 update 和 componentUpdated 鉤子中可用
## directives/auth.js
* 新建存放指令的文件`src/directives/auth.js`
~~~
import { check } from "../utils/auth";
// 開發插件的方式；定義指令；第一個參數是Vue 構造器，第二個參數是可選的選項對象
function install(Vue, options = {}) {
Vue.directive(options.name || "auth", {
// 指令定義對象的鉤子函數inserted
inserted(el, binding) {
if (!check(binding.value)) {
el.parentNode && el.parentNode.removeChild(el);
}
}
});
}
export default { install };
~~~
## 注冊自定義指令
~~~
//main.js
//通過全局方法 Vue.use() 使用插件。它需要在你調用 new Vue() 啟動應用之前完成：
import Auth from "./directives/auth";
Vue.use(Auth);
~~~
## 權限指令的使用
```
<a-icon
v-auth="['admin']"
class="trigger"
:type="collapsed ? 'menu-unfold' : 'menu-fold'"
@click="collapsed = !collapsed"
></a-icon>
```
