vue2自定義指令directive
阿新 • • 發佈:2018-12-14
除了核心功能預設內建的指令 (v-model 和 v-show),Vue 也允許註冊自定義指令。注意,在 Vue2.0 中,程式碼複用和抽象的主要形式是元件。然而,有的情況下,你仍然需要對普通 DOM 元素進行底層操作,這時候就會用到自定義指令。官網
1.分類 => 全域性 、區域性
自定義指令有全域性指令和區域性自定義指令
// 註冊一個全域性自定義指令 `v-focus`
Vue.directive('focus', {
// 當被繫結的元素插入到 DOM 中時……
inserted: function (el) {
// 聚焦元素
el.focus()
}
})
區域性
directives: {
focus: {
// 指令的定義
inserted: function (el) {
el.focus()
}
}
}
然後就可以在模板中的任何元素中使用指令
<input v-focus>
2.鉤子函式
鉤子函式總共有5個 bind:指令第一次繫結到元素時呼叫。在這裡可以進行一次性的初始化設定。 inserted:插入父節點時 updated:所在元件的VNode更新時,可可能在子VNode更新前。指令的值可能發生看改變,也可能沒有。 componentUpdated:指令所在元件的VNode及其子VNode更新時呼叫 unbind:指令與元素解綁時呼叫。
3.鉤子函式的引數
主要有四個引數:el,binding,vnode,oldvnode。 el:指令所繫結的元素,可以用來直接操作DOM bingding:一個物件,包含很多屬性 vnode:Vue生成的虛擬節點 oldvnode:上一個虛擬節點。僅在 update 和 componentUpdated 鉤子中可用
除了 el 之外,其它引數都應該是隻讀的,切勿進行修改。如果需要在鉤子之間共享資料,建議通過元素的 dataset 來進行。