vue之自定義指令

2021-08-19 00:00:08 字數 531 閱讀 6739

1.如何自定義乙個指令?

在export模板中加入directives選項

比如:directives:

bind(el bind)}}

像這樣的inserted,bind稱為鉤子函式,裡面的引數

el:代表當前指令被繫結的元件;

bind:代表當前指令所繫結的元件的一些值,通常我們列印這兩個引數時,會返回整個元件,並且元件裡面會新增一項value,其值為繫結的值,比如我們使用乙個自定義的元件v-my

testtext

那麼console.log(el)列印結果:testtext

console.log(bind)列印結果:一些關於這個指令的資訊,比如指令的名字為my,使用的時候名字為v-my,它被繫結到元件上的時候被賦予的值為「123」等等

2.如何使用這個自定義指令?

假如在當前元件中定義了乙個指令***,則在當前元件中使用

使用方法:指令名加上字首即v-***

同樣的假如我們使用vue.directives定義了乙個指令,那麼這個指令可以在全域性使用

Vue之自定義指令

vue中有很多內建的命令,例如v bind,v for,v show等等,這些指令的指責是將表示式改變時,將某些行為相應地對映到dom上。那麼除了我們常用的vue的內建指令外,我們還可以自定義指令,常用的自定義vue全域性指令的模板如下 這裡的focus是定義額指令的名稱,可根據指令作用換成其他名稱...

Vue之自定義指令

先了解一下,在vue中,有很多內建的指令.比如 等等.所以,關於指令,我們可以總結下面幾點 2.0 vue自定義指令場景小demo 非常尬 場景 我們需要乙個指令,寫在某個html表單元素上,然後讓它在被載入到dom中時,自動獲取焦點.和自定義過濾器一樣,我們這裡定義的是全域性指令 vue.dire...

vue之自定義指令

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