vue自定義指令

受angularjs的啟發，vue內建了一些非常有用的指令，比如v-html和v-once等，每個指令都有自身的用途。除了系統內部的指令，vue也允許註冊自定義指令。

全域性引入

建立乙個directive.js，**如下，然後在main.js中引入即可。

// 註冊乙個全域性自定義指令 `v-focus`
vue.directive('focus', 
})

這裡有個函式簡寫形式，想在bind和update時觸發相同行為，而不關心其它的鉤子。可以這樣寫：

vue.directive('focus', function (el, binding) )

區域性引入

如果想註冊區域性指令，元件中也接受乙個directives的選項：

directives: 
}}

然後就可以在模板中任何元素上使用新的v-focus屬性，如下：

自定義指令一共有5個鉤子函式：bind、inserted、update、componentupdate和unbind。

鉤子函式會被傳入以下引數：el、binding、vnode、oldvnode。

以上內容詳細可以參考官網對鉤子函式的簡介——鉤子函式。不過有點非常重要的就是除了el之外，其它引數都應該是唯讀的，切勿進行修改。如果需要在鉤子之間共享資料，建議通過元素的dataset來進行。

指令的使用方式主要是以下四種：

場景一：限制輸入框輸入的最大長度（不包含空格）

指令名為limit，指令的繫結值為可輸入最大長度。

//template
vue.directive('limit', function (el, binding, vnode) );
});

場景二：通過指令實現防抖

指令名為debounce，傳給指令的引數為click，click作為引數傳入的目的在於可以配置事件，通過傳keydown，mouseover等也可以讓這個指令支援滑鼠或者鍵盤事件等等。而修飾符.stop或者.prevent可以配置事件冒泡和阻止預設事件等等。

//template
vue.directive('debounce', function (el, binding) , 300);
});});

以上是兩個簡單的例子，會發現用的最頻繁的是el和binding，el表示元素本身，binding比較複雜了，它有以下屬性：

binding.value和binding.expression可能會搞亂，binding.value獲取的是具體的方法或者數值，而binding.expression獲取的僅僅是方法名和值的表示式，舉個例子：

//template
vue.directive('test', function (el, binding) );

總的來說，指令是非常強大的，但是往往也很容易被開發者們所忽略，因為很多時候用工具類函式或者元件的方式也可以實現同樣的功能，不過學會指令的話肯定就是如虎添翼，作為乙個有要求的程式設計師，還是非常有必要掌握這個技能，分享個乾貨，這15個vue自定義指令，讓你的專案開發爽到爆。