Vue學習日記之自定義指令

2021-09-24 04:45:27 字數 758 閱讀 3124

我們都知道在vue中存在了很多個指令,如v-bind、v-for等,實現了一些特定的功能,此時頭疼的事情來了,如果這些指令裡沒有我們需要的功能,那麼我們只能通過自己來編寫原生js獲取目標節點來實現,但是在vue中不提倡我們這樣做,那我們該怎麼辦呢?

全域性過濾器一樣,我們使用全域性vue來定義全域性指令。下面以自定義v-focus指令來舉例如何建立自定義指令。

執行結果:

再看下面的這個例子:

執行結果:

既然有全域性自定義指令,那麼就應該有區域性自定義指令,自定義指令的定義同自定義的過濾器一樣,都是在vue例項中定義的,與全域性定義指令不同的是directive要加s變成directives。

執行結果:

vue之自定義指令

1.如何自定義乙個指令?在export模板中加入directives選項 比如 directives bind el bind 像這樣的inserted,bind稱為鉤子函式,裡面的引數 el 代表當前指令被繫結的元件 bind 代表當前指令所繫結的元件的一些值,通常我們列印這兩個引數時,會返回整個...

Vue之自定義指令

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

Vue之自定義指令

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