>> 閱讀官網(wǎng)
當(dāng)頁面加載時(shí)，元素將獲得焦點(diǎn) (注意：autofocus 在移動(dòng)版 Safari 上不工作)。事實(shí)上，你訪問后還沒點(diǎn)擊任何內(nèi)容，input 就獲得了焦點(diǎn)?，F(xiàn)在讓我們完善這個(gè)指令：
全局指令
// 注冊(cè)一個(gè)全局自定義指令 v-focus
Vue.directive('focus', {
// 當(dāng)綁定元素插入到 DOM 中。
inserted: function (el) {
// 聚焦元素
el.focus()
}
})
局部指令
var app = new Vue({
el: '#box',
directives: {
focus: {
// 指令的定義---
}
}
});
然后你可以在模板中任何元素上使用新的 v-focus 屬性：
<input v-focus>
鉤子函數(shù)
指令定義函數(shù)提供了幾個(gè)鉤子函數(shù) (可選)：
- bind：只調(diào)用一次，指令第一次綁定到元素時(shí)調(diào)用，用這個(gè)鉤子函數(shù)可以定義一個(gè)在綁定時(shí)執(zhí)行一次的初始化動(dòng)作。
- inserted：被綁定元素插入父節(jié)點(diǎn)時(shí)調(diào)用 (父節(jié)點(diǎn)存在即可調(diào)用，不必存在于 document 中)。
- update：所在組件的 VNode 更新時(shí)調(diào)用，但是可能發(fā)生在其孩子的 VNode 更新之前。指令的值可能發(fā)生了改變也可能沒有。但是你可以通過比較更新前后的值來忽略不必要的模板更新 (詳細(xì)的鉤子函數(shù)參數(shù)見下)。
- componentUpdated：所在組件的 VNode 及其孩子的 VNode 全部更新時(shí)調(diào)用。
- unbind：只調(diào)用一次，指令與元素解綁時(shí)調(diào)用。
接下來我們來看一下鉤子函數(shù)的參數(shù) (包括 el，binding，vnode，oldVnode)。
鉤子函數(shù)參數(shù)
(這里只寫最常用的兩個(gè))
- el：指令所綁定的元素，可以用來直接操作 DOM 。
- binding：一個(gè)對(duì)象，包含以下屬性：
···· name：指令名，不包括 v- 前綴。
···· value：指令的綁定值，例如：v-my-directive="1 + 1", value 的值是 2。
函數(shù)簡(jiǎn)寫
大多數(shù)情況下，我們可能想在 bind 和 update 鉤子上做重復(fù)動(dòng)作，并且不想關(guān)心其它的鉤子函數(shù)?？梢赃@樣寫:
Vue.directive('color-swatch', function (el, binding) {
el.style.backgroundColor = binding.value
})
對(duì)象字面量
如果指令需要多個(gè)值，可以傳入一個(gè) JavaScript 對(duì)象字面量。記住，指令函數(shù)能夠接受所有合法類型的 JavaScript 表達(dá)式。
<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!"
})
