第二章—v-directive自定義指令

v-directive自定義構造器

介紹：

注冊或獲取全局指令。

 

平時大家在用vue開發項目的時候大多會用到一些官方指令，例如：

v-for/v-if/v-else/v-else-if/v-model/v-bind/v-on/v-show/v-html/v-text...

但這些指令只能完成一部分功能，大部分功能是需要我們自己來書寫的，所以我們就會用到自定義指令來幫助我們注冊自己想要的功能。

自定義指令分為兩種，一種是局部變量，一種是全局變量，我們先來看看局部變量：

 

當我們想實現這樣一個功能，點擊彈框，我們會用v-on:click這個指令，那如果我們想讓一個指令，加上之后字體就會變色，我們就可以自己注冊指令：

<template>
	<div id="app">
		<button @click="onclick" v-show="ok">
			Hello
		</button>
		<div v-color>哈哈哈</div>
	</div>
</template>

<script>
	export default {
		data: () => {
			return {
				
			}
		},
		methods: {
			onclick: function() {
				alert("666");
			}
		},
		directives:{
			'color':{
				bind:function(el,binding){
					el.style.color = 'red';
				},
				inserted:function(el){
					el.style.display = 'block';
				}
			}
		}
	}
</script>

<style>
	
</style>

　　將以上代碼打開后，我們就可以發現 ‘哈哈哈’ 三個字已經變成了紅色，所以注冊一個局部自定義指令的方法我們可以得到：

directives:{
			'color':{//給字體設置顏色
				bind:function(el){
					el.style.color="red";
				}
			}
		}

　　bind:function(el,binding,vnode)這里面有三個參數，他們分別代表的意思是：

el:你要調用的該元素，打印一下會直接打印出DOM節點

binding:一個對象，它包含了：

1. name：指令名，不包括 v- 前綴
2. value： 指令綁定的值，例如：v-count="1 + 1"中，綁定值為 2
3. expression： 字符串形式的指令表達式。例如：v-count="1 + 1"中，表達式 為 1 + 1
4. oldValue： 指令綁定的前一個值，僅在 update 和 componentUpdated 鈎子中可用。無論值是否改變都可用。
5. arg：` 傳給指令的參數，可選。例如 v-my-directive:foo 中，參數為 “foo”
6. modifiers： 一個包含修飾符的對象。例如：v-my-directive.foo.bar 中，修飾符對象為{ foo: true, bar: true }

vnode:Vue編譯生成的虛擬節點

oldvnode： 上一個虛擬節點，僅在 update 和 componentUpdated 鈎子中可用

 

 

然后如果我們想將一個指令注冊為全局指令的話，我們可以將代碼寫到main.js里面，或者新建一個index.js文件，然后在main.js里面import引入，再use()一下，不過要注意注冊為全局變量的話代碼需要改變一下，例如上邊的局部指令，改為全局的話代碼應為：

Vue.directive('none',{
	bind:function(el,binding,vnode){
		el.style.display = 'none';
	}
})

　　

　　然后自定義指令還有個生命周期：

inserted ： 表示元素 插入到DOM中的時候，會執行 inserted 函數，觸發一次。(例如：自動獲取焦點)。

updated ： 當VNode 更新的時候，會執行 updated 函數，可能會觸發多次。

componentUpdated ： 指令所在組件的VNode 及其子 VNode 全部更新后調用。

upbind： 只調用一次，指令與元素解綁時調用。