vue除了提供了缺省內置的指令外,還允許開發人員根據實際情況自定義指令,它的作用價值在於當開發人員在某些場景下需要對普通dom元素進行操作的時候。
vue自定義指令和元件一樣存在著全域性註冊和區域性註冊兩種方式。
全域性指令
效果
區域性指令
顧名思義 區域性指令定義在組建內,寫法上最大的不同是定義時directives,而不是vue.directive,看下面案例你就明白了。當全域性指令和區域性指令同名時以區域性指令為準;
"text" v-focus=
"true"
/>
<
/div>
<
/template>
exprot default
,// 被繫結元素插入父節點時呼叫 (僅保證父節點存在,但不一定已被插入文件中)
inserted
(el, binding, vnode, oldvnode)
// 設定輸入框背景色
el.style.backgroundcolor =
'red'},
// 所在元件的 vnode 更新時呼叫,但是可能發生在其子 vnode 更新之前。指令的值可能發生了改變,也可能沒有。但是你可以通過比較更新前後的值來忽略不必要的模板更新
update
(el, binding, vnode, oldvnode)
,// 指令所在元件的 vnode 及其子 vnode 全部更新後呼叫
componentupdated
(el, binding, vnode, oldvnode)
,unbind
(el, binding, vnode, oldvnode)}}
,data()
}}<
/script>
Vue 自定義指令(全域性定義 區域性定義)
前面已經介紹了幾個系統提供的指令,比如 v text v bind v on 等等,本文我們來介紹下自定義指令的實現。我們想建立乙個自動獲取焦點的指令,該功能其實可以通過document.getelementbyid search focus 來實現,但此處我們專門來介紹下自定義指令的實現方式。效果...
vue自定義全域性和區域性指令
一 介紹 1 除了核心功能缺省內置的指令 v model和v show vue 也允許註冊自定義指令。2 自定義指令的分類 1 全域性指令 2 區域性指令 3 自定義全域性指令格式 vue.directive 指令id,指令定義物件 4 自定義區域性指令格式 略二 指令物件中的鉤子函式 乙個指令定義...
vue自定義指令 區域性指令和全域性指令
以後都優先用inserted,因為inserted裡獲取到的資訊比bind中多一些 在鉤子函式內部可以通過第二個引數binding的value屬性,獲取到指令繫結的引數 指令的修飾符可以用來做一些特定的邏輯判斷處理 注意 在鉤子函式內部的this不是vm例項,可以通過第三個引數vnode.conte...