Vue中內置了很多的指令，如v-model、v-show、v-html等，但是有時候這些指令并不能滿足我們，或者說我們想為元素附加一些特別的功能，這時候，我們就需要用到vue中一個很強大的功能了—自定義指令。

在開始之前，我們需要明確一點，自定義指令解決的問題或者說使用場景是對普通 DOM 元素進行底層操作，所以我們不能盲目的胡亂的使用自定義指令。

如何聲明自定義指令？

就像vue中有全局組件和局部組件一樣，他也分全局自定義指令和局部指令。

let Opt = { bind:function(el,binding,vnode){ }, inserted:function(el,binding,vnode){ }, update:function(el,binding,vnode){ }, componentUpdated:function(el,binding,vnode){ }, unbind:function(el,binding,vnode){ },}

對于全局自定義指令的創建，我們需要使用 Vue.directive接口

Vue.directive('demo', Opt)

對于局部組件，我們需要在組件的鉤子函數directives中進行聲明

Directives: { Demo:  Opt}

Vue中的指令可以簡寫，上面Opt是一個對象，包含了5個鉤子函數，我們可以根據需要只寫其中幾個函數。如果你想在 bind 和 update 時觸發相同行為，而不關心其它的鉤子，那么你可以將Opt改為一個函數。

let Opt = function(el,binding,vnode){ }

如何使用自定義指令？

對于自定義指令的使用是非常簡單的，如果你對vue有一定了解的話。

我們可以像v-text=”'test'”一樣，把我們需要傳遞的值放在‘='號后面傳遞過去。

我們可以像v-on:click=”handClick” 一樣，為指令傳遞參數'click'。

我們可以像v-on:click.stop=”handClick” 一樣，為指令添加一個修飾符。

我們也可以像v-once一樣，什么都不傳遞。

每個指令，他的底層封裝肯定都不一樣，所以我們應該先了解他的功能和用法，再去使用它。

自定義指令的 鉤子函數

上面我們也介紹了，自定義指令一共有5個鉤子函數，他們分別是：bind、inserted、update、componentUpdate和unbind。

一個指令定義對象可以提供如下幾個鉤子函數 (均為可選)：