在vue項目中我們經常使用到 v-show ，v-if，v-for等内置的指令，除此之外vue還提供了非常友善的自定義指令，供我們對普通的dom元素進行底層的操作。使我們的日常開發變得更加友善快捷。本文就來總結一下自定義指令的使用方法及常用的場景。
這裡全局注冊一個指令，用于使用該指令的元素加一個紅色邊框，通過指令操作樣式。
運作結果如下：
上面的代碼中通過 Vue.directive 方法注冊了一個全局的指令，該函數接收兩個參數，第一個參數為指令名稱，在元素中通過 " v-名稱 " 綁定元素，第二個參數為對綁定元素進行處理的鈎子函數，後面會有詳細介紹。
和全局注冊指令基本一樣，隻是作用範圍不同而已，這裡在元件内部注冊一個自定義指令用于給元件内部的綁定元素設定藍色邊框。
通過上面的代碼，在子元件内部通過 directives 對象注冊了一個給綁定元素設定藍色邊框的元件，該對象中傳入鍵值對，其中鍵表示指令名稱，通過" v-名稱 "使用，其值對應一個對象，對象内部為指令的相關鈎子函數。後面詳解鈎子函數。
注意：當同一個元素及使用了全局指令和局部指令對統一屬性進行操作的時候，會優先使用局部自定義指令，這裡采用就近原則，局部指令會優先于全局指令對統一屬性操作的調用。
看了上面的介紹我們值都了directive的用法，但是裡面的鈎子函數還需要清楚，隻有明白了鈎子函數的調用時機，才能定義出更加完美的指令。
一個指令定義對象可以提供如下幾個鈎子函數 (均為可選)：
* bind：隻調用一次，指令第一次綁定到元素時調用。在這裡可以進行一次性的初始化設定。
* inserted：被綁定元素插入父節點時調用 (僅保證父節點存在，但不一定已被插入文檔中)。
* update：所在元件的 VNode 更新時調用，但是可能發生在其子 VNode 更新之前。指令的值可能發生了改變，也可能沒有。但是你可以通過比較更新前後 的值來忽略不必要的模闆更新 (詳細的鈎子函數參數見下)。
* componentUpdated：指令所在元件的 VNode 及其子 VNode 全部更新後調用。
* unbind：隻調用一次，指令與元素解綁時調用。
鈎子函數參數 指令鈎子函數會被傳入以下參數：
* el：指令所綁定的元素，可以用來直接操作 DOM。
* binding：一個對象，包含以下 property：
* 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 編譯生成的虛拟節點。
* oldVnode：上一個虛拟節點，僅在 update 和 componentUpdated 鈎子中可用。
指令的參數可以是動态的。例如，在 v-mydirective:[argument]="value" 中，argument 參數可以根據元件執行個體資料進行更新！這使得自定義指令可以在應用中被靈活使用。下面例子中分别設定指令實作元素的邊框綁定和元素的背景屬性綁定。
順便看下列印的參數：
上面的代碼中通過兩種方式介紹了動态參數自定義指令的方法，使用十分靈活，根據實際需要選擇合适的方式。
在很多時候，你可能想在 <code>bind</code> 和 <code>update</code> 時觸發相同行為，而不關心其它的鈎子。比如這樣寫：
在綁定自定義指令的元素紅傳入一個對象的格式的資料，然後在函數簡寫方式中使用。
除了上面的使用場景外，比如我們在項目中通過自定義指令來控制一個前端頁面的權限問題，在指令中設定一個參數，當頁面加載或者送出事件觸發的時候，首先執行該自定義指令的事件，去請求校驗是否有這個權限，做出相應的操作。使用的地方還有好多，需要在項目中不斷練習，可能有别的替代的方法而不被運用，這就需要我們不斷去學習鞏固這些基礎知識，應用最優的解決方法去完成項目。
以上就是本文的全部内容，希望給讀者帶來些許的幫助和進步，友善的話點個關注，小白的成長之路會持續更新一些工作中常見的問題和技術點。最後，大家中秋節快樂！！！