說說 Vue.js 中的自定義指令

若是須要直接操做 DOM，那麼就會用到自定義指令啦。

1 註冊

註冊自定義指令分爲全局註冊與局部註冊兩種：

全局註冊：

Vue.directive('xxx', {
        inserted: function (el) {
           //指令屬性
        }
    });
複製代碼

局部註冊：

var app = new Vue({
	el: '#app',
	directives: {
		xxx: {
			//指令屬性
		}
	}
});
複製代碼

2 屬性

自定義指令屬性包含這些鉤子函數，它們都是可選的：

鉤子函數	說明
bind	只調用一次，第一次綁定指令到元素時調用，咱們能夠在此綁定只執行一次的初始化動做。
inserted	被綁定元素插入父節點時調用（父節點只要存在便可調用，沒必要存在於 document 中）。
update	不管綁定值是否發生變化，只要被綁定元素所在的模板被更新便可調用。Vue.js 會經過比較更新先後的綁定值，忽略沒必要要的模板更新操做。
componentUpdated	被綁定元素所在模板完成一次更新週期時調用。
unbind	指令與元素解綁時調用，只調用一次。

假設咱們須要自定義一個 v-focus 指令，即在 <input> 或 <textarea> 標籤初始化時得到焦點。

html：

<div id="app">
    <input type="text" v-focus>
</div>
複製代碼

js：

//全局註冊
Vue.directive('focus', {
	inserted: function (el) {
		el.focus();//聚焦
	}
});

var app = new Vue({
	el: '#app',
	data: {}
});
複製代碼

效果：

這些鉤子函數通常包含這些入參：

入參	說明
el	指令所綁定的元素，可利用它直接操做 DOM
binding	綁定對象。（下面會具體說明）
vnode	編譯生成的虛擬節點。
oldVnode	上一個虛擬節點，僅在 update 與 componentUpdated 中可用。

綁定對象屬性說明：

屬性	說明	示例
name	指令名，不包含前綴 v-。	v-focus 中的 focus。
value	指令所綁定的值（計算後）。	v-focus=「1 + 2」 中的 3。
oldValue	指令所綁定的前一個值，不管值是否改變都有值，且僅在 update 與 componentUpdated 中可用。	-
expression	綁定的值的字符串形式（不計算）。	v-focus=「1 + 2」 中的 1 + 2。
arg	傳遞給指令的參數。	v-focus:xxx 中的 xxx。
modifiers	包含修飾符的對象。	v-focus.a.b 中，爲 {a:true, b:true}。

html：

<div id="app2">
    <div v-deniro-directive:content.a.b="content"></div>
</div>
複製代碼

js：

Vue.directive('deniro-directive', {
	bind: function (el, binding, vnode) {
		var keys = [];
		for (var i in vnode) {
			keys.push(i);
		}

		el.innerHTML =
			'names:' + binding.name + '<br>' +
			'value:' + binding.value + '<br>' +
			'expression:' + binding.expression + '<br>' +
			'arg:' + binding.arg + '<br>' +
			'modifiers:' + JSON.stringify(binding.modifiers) + '<br>' +
			'vnode keys:' + keys.join(', ');
	}
});
var app2 = new Vue({
	el: '#app2',
	data: {
		content: '養生吃枸杞，選對的別選貴的！'
	}
});

複製代碼

渲染結果：

names:deniro-directive value:養生吃枸杞，選對的別選貴的！ expression:content arg:content modifiers:{"a":true,"b":true} vnode keys:tag, data, children, text, elm, ns, context, functionalContext, key, componentOptions, componentInstance, parent, raw, isStatic, isRootInsert, isComment, isCloned, isOnce

咱們能夠在 bind 中綁定一些事件（addEventListener），而後在 unbind 中解綁一些事件（removeEventListener）。好比讓某個元素隨着鼠標移動。

3 多值入參

咱們能夠經過 JavaScript 的對象字面量，爲自定義指令一次性傳入多個值。其實任意一個合法的 JavaScript 表達式都是支持的。

html：

<div id="app3">
    <div v-deniro-directive2="{title:'物理學家新發現四起黑洞相撞事件',content:'物理學家探測到了它們向地球發來的引力波'}"></div>
</div>
複製代碼

js：

Vue.directive('deniro-directive2', {
	bind: function (el, binding, vnode) {

		el.innerHTML =
			'title:' + binding.value.title + '<br>' +
			'content:' + binding.value.content + '<br>';
	}
});
var app3 = new Vue({
	el: '#app3',
	data: {
	}
});
複製代碼

渲染結果：

title:物理學家新發現四起黑洞相撞事件 content:物理學家探測到了它們向地球發來的引力波

本文示例代碼