[轉]ARM Cortex-M底層技術(3)—編譯核心的原理及其應用 - 中藍聞道 - 部落格園
Vue2.x用法
全域性註冊
Vue.directive( 指令名, { 自定義指令生命週期 } )
區域性註冊
directives: { 指令名, { 自定義指令生命週期 } }
使用
v-指令名: 屬性名.修飾符=“value值”
鉤子函式
bind - 自定義指令繫結到 DOM 後呼叫. 只調用一次, 注意: 只是加入進了DOM, 但是渲染沒有完成
inserted - 自定義指令所在DOM, 插入到父 DOM 後呼叫, 渲染已完成(最最重要)
update - 元素更新, 但子元素尚未更新, 將呼叫此鉤子( 自定義指令所在元件更新時執行, 但是不保證更新完成 ) —> 和自定義所在元件有關
componentUpdated - 元件和子級更新後執行( 自定義指令所在元件更新完成, 且子元件也完成更新 ),
—> 和自定義所在元件有關
unbind - 解綁(銷燬) .( 自定義指令所在 DOM 銷燬時執行 ). 只調用一次
鉤子函式的引數
注意: 自定義指令中, 都不能直接使用this
1.el: 當前指令所在的dom元素。
2.binding: 是一個物件, 表示當前指令上的屬性、修飾符、value值等資訊。只有value最重要, 常用
arg：String, 屬性名 。例如 v-my-directive:foo 中，屬性名為 “foo”。
modifiers：Object, 包含所有修飾符的一個物件。例如：v-my-directive.foo.bar 中，修飾符物件為 { foo: true, bar: true }。
name：String, 指令名，不包括 v- 字首。
rawName, String, 完整指令名，例如 v-my-directive:foo.bar=“1 + 1” 中, 完整指令名就是 v-my-directive:foo.bar=“1 + 1”
value：Any, 指令繫結的當前值，例如：v-my-directive=“1 + 1” 中，繫結值為 2。(最最重要)
expression：String, 解析的哪一個值、表示式。例如 v-my-directive=“1 + 1” 中，表示式為 “1 + 1”。
oldValue：Any, 指令繫結的前一個值，僅在 update 和 componentUpdated 鉤子中可用。無論值是否改變都可用。
oldArg：Any, 指令屬性名的前一個值，僅在 update 和 componentUpdated 鉤子中可用。無論值是否改變都可用。
3.vnode：當前節點資訊, 可以獲取, 當前指令所在元件的例項 vnode.context - 當前指令所在的例項物件
4.oldVnode：上一個虛擬節點，僅在 update 和 componentUpdated 鉤子中可用。https://suowo.cn
Vue3.x用法
用法和 Vue2.x 一樣
全域性註冊
Vue.directive( 指令名, { 自定義指令生命週期 } )
區域性註冊
directives: { 指令名, { 自定義指令生命週期 } }
使用
v-指令名: 屬性名.修飾符=“value值”
以外掛的形式, 進行全域性註冊
鉤子函式
較 Vue2.x 相比, 鉤子函式有變化
最終的 API 如下：
| 1 2 3 4 5 6 7 8 9 |
const MyDirective = {
created(el, binding, vnode, prevVnode) {}, // 新增
beforeMount() {},
mounted() {},
beforeUpdate() {}, // 新增
updated() {},
beforeUnmount() {}, // 新增
unmounted() {}
}
|
created - 自定義指令所在元件, 建立後
beforeMount - 就是Vue2.x中的 bind, 自定義指令繫結到 DOM 後呼叫. 只調用一次, 注意: 只是加入進了DOM, 但是渲染沒有完成
mounted - 就是Vue2.x中的 inserted, 自定義指令所在DOM, 插入到父 DOM 後呼叫, 渲染已完成(最最重要)
beforeUpdate - 自定義指令所在 DOM, 更新之前呼叫
updated - 就是Vue2.x中的 componentUpdated
beforeUnmount - 銷燬前
unmounted - 銷燬後
以上就是理解Vue2.x和Vue3.x自定義指令用法及鉤子函式原理的詳細內容，更多關於Vue2.x和Vue3.x的資料請關注指令碼之家其它相關文章！
您可能感興趣的文章:
塵世中的小技術