除了核心功能缺省內置的指令 (v-model
和v-show
),vue 也允許註冊自定義指令。注意,在 vue2.0 中,**復用和抽象的主要形式是元件。然而,有的情況下,你仍然需要對普通 dom 元素進行底層操作,這時候就會用到自定義指令。
// 註冊乙個全域性自定義指令 `v-focus`
vue.directive('focus',
})
如果想註冊區域性指令,元件中也接受乙個directives
的選項:
directives:
}}
然後你可以在模板中任何元素上使用新的v-focus
屬性,如下:
二、乙個指令定義物件可以提供如下幾個鉤子函式 (均為可選):
三、引數
name
:指令名,不包括v-
字首。
value
:指令的繫結值,例如:v-my-directive="1 + 1"
中,繫結值為2
。
oldvalue
:指令繫結的前乙個值,僅在update
和componentupdated
鉤子中可用。無論值是否改變都可用。
expression
:字串形式的指令表示式。例如v-my-directive="1 + 1"
中,表示式為"1 + 1"
。
arg
:傳給指令的引數,可選。例如v-my-directive:foo
中,引數為"foo"
modifiers
:乙個包含修飾符的物件。例如:v-my-directive.foo.bar
中,修飾符物件為。
(vnode和oldvnode沒用過)
Vue自定義指令使用場景 許可權校驗
directive.js 控制元素顯示不顯示 vue.directive premission1 function el,obj 控制元素載入不載入,需要用到鉤子函式 instered vue.directive premission2 v premission1 3 我顯示h1 v premiss...
關於vue的自定義指令使用場景問題
vue官方文件有自定義指令使用案例,可以有以下兩個使用場景 1.懶載入 當你在閱覽某 的時,可能會由於資源比較大而載入緩慢,需要消耗一小段時間來呈現到眼前,這個體驗肯定是不太友好的 就像 切換頁面,有時候會載入資源比較慢,為了給使用者較好的體驗,一般都會先出乙個正在載入的友好提示頁面 所以這個案例的...
自定義指令,以及使用場景
vue 除了提供預設的內建指令,還可以允許開發人員根據實際情況自定義指令,他的作用價值在於開發人員在某些場合下需要對普通的dom元素進行操作 vue自定義指令和元件一樣存在著全域性註冊和區域性註冊兩種方式,全域性自定義指令 通過vue.directive id,definition 方式註冊全域性指...