Vue中自定義指令

山有木xi發表於2020-03-05
Vue

Vue中除了內建指令，也允許註冊自定義的指令。

自定義指令提供一種將資料的變化對映為DOM的行為


例如：當我們想用一個函式表示焦點

Vue.directive('abc',{
inserted:function(el){//el為指令所繫結的元素
el.focus();
}
}
)

定義以後那我們該怎麼使用呢

<input type="text" v-abc>

1)鉤子函式

  • bind：只呼叫一次，指令第一次繫結到元素時呼叫。。

  • inserted：被繫結元素插入父節點時呼叫 (僅保證父節點存在，但不一定已被插入文件中)。

  • update：所在元件的 VNode 更新時呼叫

  • componentUpdated：指令所在元件的 VNode 及其子 VNode 全部更新後呼叫。

  • unbind：只呼叫一次，指令與元素解綁時呼叫。

而鉤子函式的使用方式

Vue.directive('abc',{
bind:function(){
//指令繫結元素時呼叫
}
update:function(newVlue，oldVlue){
//每次變化更新時呼叫
}
unbind:function(){
//指令解除繫結元素時呼叫
}
}
)

2）指令函式引數：

  • el：指令所繫結的元素，可以用來直接操作 DOM。
  • binding：一個物件，包含以下屬性：

    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 中，修飾符物件為 { foo: true, bar: true }。

  • vnode：Vue 編譯生成的虛擬節點。
  • oldVnode：上一個虛擬節點，僅在 update 和 componentUpdated 鉤子中可用。

3）物件字面量

如果指令需要多個值，則可以傳入一個JavaScript物件字面量，指令可以使用任意合法的JavaScript表示式

4）字面修飾符

當指令使用了字面修飾符時，它的值將按普通的字串處理並傳遞給update方法，update方法只呼叫一次，因為普通字串不能響應資料變化

5）元素指令

有時我們想自定義元素的形式使用指令，而不是屬性，這個時候就需要元素指令

HTML:

<body>
<abc>    </abc>
</bode>

Vue:

Vue.elementDirective('abc',{
bind:function(){
console.info(this.el.classname)
console.info(this.el.getAttribute("name"))
}
})


來自 “ ITPUB部落格 ” ，連結：http://blog.itpub.net/69917874/viewspace-2678687/，如需轉載，請註明出處，否則將追究法律責任。

相關文章