自定義指令
Vue.js已經(jīng)為我們提供了很多默認的指令，例如：v-for、v-if音同、v-bind、v-on等秃嗜，這些指令已經(jīng)可以幫助我們完成很多的事情权均，但是當我們有一些特殊化的需求時就需要自己做定制了，這時候自定義指令就登場了锅锨。
注冊
自定義指令的注冊方式和組件的注冊類似叽赊，也有全局注冊和局部注冊兩種方式。
- 全局注冊
// 注冊一個全局自定義指令 v-focus
Vue.directive('focus', {
// 當綁定元素插入到 DOM 中必搞。
inserted: function (el) {
// 聚焦元素
el.focus()
}
})
- 局部注冊
directives: {
focus: {
// 指令的定義---
}
}
這樣我們就可以在標簽中使用注冊的指令了必指。
<input v-focus>
鉤子函數(shù)
bind:
只調用一次，指令第一次綁定到元素時調用恕洲，用這個鉤子函數(shù)可以定義一個在綁定時執(zhí)行一次的初始化動作塔橡。inserted
被綁定元素插入父節(jié)點時調用（父節(jié)點存在即可調用，不必存在于 document 中）研侣。update
被綁定元素所在的模板更新時調用谱邪，而不論綁定值是否變化。通過比較更新前后的綁定值庶诡，可以忽略不必要的模板更新（詳細的鉤子函數(shù)參數(shù)見下）惦银。componentUpdated
被綁定元素所在模板完成一次更新周期時調用。unbind
只調用一次末誓， 指令與元素解綁時調用扯俱。
鉤子函數(shù)的參數(shù)
el
指令所綁定的元素，可以用來直接操作 DOM 喇澡。-
binding
一個對象迅栅，包含以下屬性：name
指令名，不包括 v- 前綴晴玖。value
指令的綁定值读存， 例如： v-my-directive="1 + 1", value 的值是 2为流。oldValue
指令綁定的前一個值，僅在 update 和 componentUpdated 鉤子中可用让簿。無論值是否改變都可用敬察。expression
綁定值的字符串形式。 例如 v-my-directive="1 + 1" 尔当， expression 的值是 "1 + 1"莲祸。arg
傳給指令的參數(shù)。例如 v-my-directive:foo椭迎， arg 的值是 "foo"锐帜。modifiers
一個包含修飾符的對象。 例如： v-my-directive.foo.bar, 修飾符對象 modifiers 的值是 { foo: true, bar: true }畜号。
vnode
Vue 編譯生成的虛擬節(jié)點缴阎，查閱 VNode API 了解更多詳情。oldVnode
上一個虛擬節(jié)點弄兜，僅在 update 和 componentUpdated 鉤子中可用药蜻。
下面通過一個??來看下這些參數(shù)瓷式。
<div id="hook-arguments-example" v-demo:hello.a.b="message"></div>
Vue.directive('demo', {
bind: function (el, binding, vnode) {
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>'
}
})
new Vue({
el: '#hook-arguments-example',
data: {
message: 'hello!'
}
})
// 結果
name: demo
value: hello!
expression: message
argument: hello
modifiers: {a: true, b: true}
