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

2021-10-09 16:02:49 字數 565 閱讀 2969

vue 除了提供預設的內建指令,還可以允許開發人員根據實際情況自定義指令,他的作用價值在於開發人員在某些場合下需要對普通的dom元素進行操作;

vue自定義指令和元件一樣存在著全域性註冊和區域性註冊兩種方式,全域性自定義指令;通過vue.directive( id, [definition] )方式註冊全域性指令,第乙個引數為自定義指令名稱(指令名稱不需要加v-字首,預設是自動加上字首的,使用指令的時候一定要加上字首),第二個引數可以是物件資料,也可以是乙個指令函式。

// 這個輸入框會指定獲取焦點
自定義指令來優化的載入:在載入過程中,未載入完成時使用灰色背景佔位,載入完後直接顯示

// 全域性註冊

vue.directive('imgurl', function (el, binding)

})

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的自定義指令使用場景問題

vue官方文件有自定義指令使用案例,可以有以下兩個使用場景 1.懶載入 當你在閱覽某 的時,可能會由於資源比較大而載入緩慢,需要消耗一小段時間來呈現到眼前,這個體驗肯定是不太友好的 就像 切換頁面,有時候會載入資源比較慢,為了給使用者較好的體驗,一般都會先出乙個正在載入的友好提示頁面 所以這個案例的...