除了核心功能默認內置的指令 (v-model
和 v-show
),Vue 也允許註冊自定義指令。
一 、基本用法
自定義指令也分全局註冊和局部註冊,比如註冊一個v-focus
的指令,用於在<input>、<textarea>
元素初始化自動獲得焦點
//全局註冊
// 註冊一個全局自定義指令 `v-focus`
Vue.directive('focus', {
// 當被綁定的元素插入到 DOM 中時……
inserted: function (el) {
// 聚焦元素
el.focus()
}
})
如果想註冊局部指令,組件中也接受一個 directives
的選項:
directives: {
focus: {
// 指令的定義
inserted: function (el) {
el.focus()
}
}
}
然後你可以在模板中任何元素上使用新的 v-focus
屬性,如下:
<input v-focus>
鉤子函數
一個指令定義對象可以提供如下幾個鉤子函數 (均爲可選):
-
bind:只調用一次,指令第一次綁定到元素時調用。在這裏可以進行一次性的初始化設置。
-
inserted:被綁定元素插入父節點時調用 (僅保證父節點存在,但不一定已被插入文檔中)。
-
update:所在組件的 VNode 更新時調用,但是可能發生在其子 VNode
更新之前。指令的值可能發生了改變,也可能沒有。但是你可以通過比較更新前後的值來忽略不必要的模板更新 (詳細的鉤子函數參數見下)。 -
componentUpdated:指令所在組件的 VNode 及其子 VNode 全部更新後調用。
-
unbind:只調用一次,指令與元素解綁時調用。
<input type=“text” v-focue>
vue.directive('focus',{
inserted:function (el){
//聚焦元素
el.focus();
}
})
var app = new vue({
餓了:‘#app’
})
v-focus渲染後的效果
接下來我們來看一下鉤子函數的參數 (即 el、binding、vnode
和 oldVnode
)。
鉤子函數參數
指令鉤子函數會被傳入以下參數:
-
el:
指令所綁定的元素,可以用來直接操作 DOM 。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:
Vue 編譯生成的虛擬節點。移步VNode API
來了解更多詳情。 -
oldVnode
:上一個虛擬節點,僅在update
和componentUpdated
鉤子中可用。
除了 el
之外,其它參數都應該是隻讀的,切勿進行修改。如果需要在鉤子之間共享數據,建議通過元素的 dataset
來進行。
<div id="hook-arguments-example" v-demo:foo.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>' +
'vnode keys: ' + Object.keys(vnode).join(', ')
}
})
new Vue({
el: '#hook-arguments-example',
data: {
message: 'hello!'
}
})
函數簡寫
在很多時候,你可能想在 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) {
console.log(binding.value.color) // => "white"
console.log(binding.value.text) // => "hello!"
})