關於vue的自定義指令使用場景問題

2022-07-07 19:12:14 字數 623 閱讀 6811

vue官方文件有自定義指令使用案例,可以有以下兩個使用場景

1.懶載入

當你在閱覽某**的時,可能會由於資源比較大而載入緩慢,需要消耗一小段時間來呈現到眼前,這個體驗肯定是不太友好的(就像**切換頁面,有時候會載入資源比較慢,為了給使用者較好的體驗,一般都會先出乙個正在載入的友好提示頁面),所以這個案例的功能就是在資源還沒載入出來時,先顯示預設背景圖,當資源真正載入出來了之後,再把真實放置到對應的位置上並顯示出來。

vue.directive('image', , math.random() * 1200)}})

export default ,,]

}}}2.校驗按鈕的許可權

vue.directive('permission',  = binding

const permission = (store.getters && store.state.permission) || 

// 如果操作按鈕繫結值為字串

if (typeof value === 'string') )

if (!haspermission) 

} else if (value instanceof array) )

if (!bool) 

} else }})

vue的自定義指令及使用場景

除了核心功能缺省內置的指令 v model和v show vue 也允許註冊自定義指令。注意,在 vue2.0 中,復用和抽象的主要形式是元件。然而,有的情況下,你仍然需要對普通 dom 元素進行底層操作,這時候就會用到自定義指令。註冊乙個全域性自定義指令 v focus vue.directive...

Vue自定義指令使用場景 許可權校驗

directive.js 控制元素顯示不顯示 vue.directive premission1 function el,obj 控制元素載入不載入,需要用到鉤子函式 instered vue.directive premission2 v premission1 3 我顯示h1 v premiss...

自定義指令,以及使用場景

vue 除了提供預設的內建指令,還可以允許開發人員根據實際情況自定義指令,他的作用價值在於開發人員在某些場合下需要對普通的dom元素進行操作 vue自定義指令和元件一樣存在著全域性註冊和區域性註冊兩種方式,全域性自定義指令 通過vue.directive id,definition 方式註冊全域性指...