一.自定義指令directive
// 注冊(cè)一個(gè)全局自定義指令 `v-focus`
Vue.directive('abc', {
// 當(dāng)被綁定的元素插入到 DOM 中時(shí)……
inserted: function (el) {
// 聚焦元素
el.focus()
}
})
html
<input v-abc>
鉤子函數(shù)
一個(gè)指令定義對(duì)象可以提供如下幾個(gè)鉤子函數(shù) (均為可選):
bind:只調(diào)用一次研侣,指令第一次綁定到元素時(shí)調(diào)用。在這里可以進(jìn)行一次性的初始化設(shè)置炮捧。
inserted:被綁定元素插入父節(jié)點(diǎn)時(shí)調(diào)用 (僅保證父節(jié)點(diǎn)存在庶诡,但不一定已被插入文檔中)。
update:所在組件的 VNode 更新時(shí)調(diào)用咆课,但是可能發(fā)生在其子 VNode 更新之前末誓。指令的值可能發(fā)生了改變,也可能沒有傀蚌。但是你可以通過比較更新前后的值來忽略不必要的模板更新 (詳細(xì)的鉤子函數(shù)參數(shù)見下)基显。
componentUpdated:指令所在組件的 VNode 及其子 VNode 全部更新后調(diào)用。
unbind:只調(diào)用一次善炫,指令與元素解綁時(shí)調(diào)用。