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 只呼叫一次,指令第一次繫結到元素時呼叫,用這個鉤子函式可以定義乙個在繫結 ...