Vuejs全家桶系列(六) 自定義指令

2021-08-13 20:04:06 字數 984 閱讀 2705

vue.js 允許你註冊自定義指令,實質上是讓你教 vue 一些新技巧:怎樣將資料的變化對映到 dom 的行為。你可以使用vue.directive(id, definition)的方法傳入指令id和定義物件來註冊乙個全域性自定義指令。定義物件需要提供一些鉤子函式(全部可選):

自定義指令是用來操作dom的。儘管vue推崇資料驅動檢視的理念,但並非所有情況都適合資料驅動。自定義指令就是一種有效的補充和擴充套件,不僅可用於定義任何的dom操作,並且是可復用的。

第一種寫法(可選擇下面的多個方法)

vue.directive('hello',,

inserted(),

update(),

componentupdated(),

unbind()

});

第二種寫法(只呼叫bind和update)

//傳入乙個簡單的函式,bind和update時呼叫

vue.directive('wbs',function

());

一旦註冊好自定義指令,你就可以在 vue.js 模板中像這樣來使用它(需要新增 vue.js 的指令字首,預設為 v-):

上下文環境。指令物件上暴露了一些有用的公開屬性:

el: 指令繫結的元素

vm: 擁有該指令的上下文 viewmodel

expression: 指令的表示式,不包括引數和過濾器

arg: 指令的引數

raw: 未被解析的原始表示式

name: 不帶字首的指令名

功能:使dom節點可以拖拽

vue.directive('drag',function

(el)

//停止移動

document.onmouseup=function

(e) }

});

Qt編寫的專案作品22 自定義委託全家桶

可設定多種委託型別,例如核取方塊 文字框 下拉框 日期框 微調框 進度條等。可設定是否密文顯示,一般用於文字框。可設定是否允許編輯,一般用於下拉框。可設定是否禁用,一般用來禁用某列。可設定資料集合,比如下拉框資料集合。提供值變化訊號,比方說下拉框值改動觸發。可設定資料校驗自動產生不同的圖示。支援設定...

Vuejs自定義select2指令

在做select2外掛程式的時候遇到一些坑,最終解決如下 vue.directive select2 var defaultopt options assign defaultopt,options el select2 options on select2 select e 雙向繫結不生效 繫結選...

vuejs學習4 自定義指令

1 只是方法名由component 改為了directive 上例只是註冊了自定義指令 v focus 還沒有實現具體功能,下面具體介紹自定義指令的各個選工頁。自定義指令的選項是由幾個鉤子函式組成的,每個都是可選的。bind 只呼叫一次,指令第一次繫結到元素時呼叫,用這個鉤子函式可以定義乙個在繫結 ...