vue的自定義指令directive

2021-10-04 23:26:57 字數 884 閱讀 2059

在vue中可以在dom元素中新增一些指令如 v-for迴圈 ,v-on繫結事件,v-bind動態繫結類名或者屬性等

在vue中也可以建立自定義指令來做一些需要操作dom的業務

// 自定義元件的例項化

vue.directive('自定義指令的名', , // 指令第一次繫結到元素時呼叫。在這裡可以進行一次性的初始化設定。只觸發一次

inserted: function () {}, // 當繫結的元素插入dom中的時候會觸發

update: function () {}, // 所在元件的 vnode 更新時呼叫

componentupdated: function () {}, 指令所在元件的 vnode 及其子 vnode 全部更新後呼叫

unbind: function () {}//指令與元素解綁時呼叫,只能觸發一次

})

在這鉤子函式中有幾個引數

el:指的是當前繫結的元素,可以用來操作dom。

binding:只是乙個物件,可以用來完成資料的互動

例子 v-my-directive:foo.b.c='3*7' 可以通過binding.屬性 來獲取想要的引數

(1)name:這個獲取到的就是v-後面的指令名my-directive

(2)value:這個獲取到的就是等號後面的值21

(3)oldvalue:指令繫結的前乙個值,只在 update 和 componentupdated 鉤子中可用

(4)expression:這個獲取的就是等號後面的表示式3*7

(5)arg:這個獲取到的引數就是:後面的foo

(6)modifiers:這個獲取到的引數就式.後面的引數,是以物件的方式展現的

angularjs自定義指令Directive

今天學習angularjs自定義指令directive。directive是乙個非常棒的功能。可以實現我們自義的的功能方法。下面的例子是演示使用者在文字框輸入的帳號是否為管理員的帳號 admin 在網頁上放乙個文字框和乙個銨鈕 然後你需要引用angularjs的類庫 scripts.render b...

Vue自定義指令

vue有很多內建的指令,比如說v on,v model,v clock等等,每乙個指令會完成一定的功能,但是這些內建的指令總會有些侷限性,要是能夠自定義指令就好了 vue的自定義指令分類 全域性指令和區域性指令 vue指令的定義和用法 以全域性指令為例 1.語法 vue.directive 指令id...

vue自定義指令

自定義指令主要有兩種方式。一是在元件裡以directives的選項來自定義指令的內容。這樣的自定義指令是區域性的自定義指令,只在當前的元件裡面才能使用。script export default directives arr arr.join el.style.csstext arr script ...