背景
除了核心功能預設内置的指令 (
v-model
和
v-show
)，Vue 也允許注冊自定義指令。注意，在
Vue2.0
中，代碼複用和抽象的主要形式是元件。然而，有的情況下，你仍然需要對普通 DOM 元素進行底層操作，這時候就會用到自定義指令。 從一個輸入框自動聚焦的案例入手：
正常情況下，考慮複用性，自定義一個指令我們希望能給全局使用，是以選擇全局注冊
Vue.directive('focus', { //Vue.directive就是在全局注冊的意思
// 指令綁定的元素被插入到 DOM 中時
inserted (el) { //這是指令執行的鈎子函數，而不是Vue執行個體生命周期的鈎子
// 聚焦元素
el.focus()
}
})
Vue執行個體生命周期鈎子函數
先來回顧一下，Vue執行個體生命周期中都有哪些鈎子函數
具化如下所示
指令的鈎子函數
一個指令定義對象可以提供如下幾個鈎子函數
指令的鈎子函數的參數
鈎子函數可以接受一些參數，用來指定要操作的對象或事件
（提示：如果看不懂的話，在下面的知識點後面有案例可以參考）
-
el
-
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
-
oldVnode
update
componentUpdated
除了之外，其它參數都應該是隻讀的，切勿進行修改。如果需要在鈎子之間共享資料，建議通過元素的el
來進行。dataset
一個自定義鈎子案例
為了更好的了解，我們使用例子來簡單列印一下這麼些個參數
//下面的message是一個變量，在vue對象的data屬性裡面有定義
<div id="hook-arguments-example" v-demo:foo.a.b="message"></div>
Vue.directive('demo', {
bind () {
var s = JSON.stringify
el.innerHTML =
'name: ' + s(binding.name) + '<br>' +
'value: ' + s(binding.value) + '<br>' +
'expression: ' + s(binding.expression) + '<br>' +
'argument: ' + s(binding.arg) + '<br>' +
'modifiers: ' + s(binding.modifiers) + '<br>' +
'vnode keys: ' + Object.keys(vnode).join(', ')
}
})
new Vue({
el: '#hook-arguments-example'
data: {
message: 'hello'
}
})
執行結果：
name: "demo"
value: "hello!"
expression: "message"
argument: "foo"
modifiers: {"a":true,"b":true}
vnode keys: tag, data, children, text, elm, ns, context,
fnContext, fnOptions, fnScopeId, key, componentOptions,
componentInstance, parent, raw, isStatic, isRootInsert,
isComment, isCloned, isOnce, asyncFactory, asyncMeta, isAsyncPlaceholder
函數簡寫
在很多時候，你可能想在 bind 和 update 時觸發相同行為，而不關心其它的鈎子。比如這樣寫:
（解釋：如果不指定是什麼鈎子，而隻寫function的話，預設就是代表在 bind 和 update 時觸發相同行為）
Vue.directive('color-swatch', function (el, binding) {
el.style.backgroundColor = binding.value
})
字面量對象法
如果指令需要多個值，可以傳入一個 JavaScript 對象字面量。記住，指令函數能夠接受所有合法的 JavaScript 表達式。
<div v-demo="{ color: 'white', text: 'hello!' }"></div>
Vue.directive('demo', function (el, binding) {
//binding.value：指令的綁定值，例如：v-my-directive="1 + 1" 中，綁定值為 2。
console.log(binding.value.color) // => "white"
console.log(binding.value.text) // => "hello!"
})
本文轉載自：https://www.jianshu.com/p/8d3980334b80