Vue自定義指令詳解

更新時間：2021年11月15日 15:48:33 作者：小旺不正經(jīng)

這篇文章主要為大家介紹了Vue自定義指令，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助

Vue自定義指令

自定義指令

注冊一個全局指令v-focus，該指令的功能是在頁面加載時元素獲得焦點

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../js/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<input v-fo>
		</div>
		<script>
            // 注冊自定義指令
			Vue.directive('fo',{
				inserted:function(el){
                    // 聚焦元素
					el.focus()
				}
			})
			new Vue({
				el: '#app'
			})
		</script>
	</body>
</html>

打開界面光標(biāo)直接在輸入框內(nèi)

鉤子函數(shù)

指令定義函數(shù)提供了幾個鉤子函數(shù)（可選）。

bind：只調(diào)用一次，指令第一次綁定到元素時調(diào)用，可以用這個鉤子函數(shù)定義一個在綁定時執(zhí)行一次的初始化動作。
inserted：被綁定的元素插入父節(jié)點時調(diào)用（父節(jié)點存在即可調(diào)用，不必存在于document中）。
update：被綁定元素所在的模板更新時調(diào)用，而不論綁定值是否變化。通過比較更新前后的綁定值，可以忽略不必要的模板更新。
componentUpdated：被綁定元素所在模板完成一次更新周期時調(diào)用。
unbind：只調(diào)用一次，指令與元素解綁時調(diào)用。

鉤子函數(shù)的參數(shù)主要有以下幾項

el：指令所綁定的元素，可以用來直接操作DOM。
binding：一個對象，包含以下屬性
name：指令名，不包括v-前綴。
value：指令的綁定值，例如v-my-directive=“1+1”，value的值是2。
oldValue：指令綁定的前一個值，僅在update和componentUpdated鉤子中可用，無論值是否改變都可用。
expression：綁定值的表達(dá)式或變量名，例如v-my-directive=“1+1”，expression的值是"1+1"。
arg：傳給指令的參數(shù)，例如v-my-directive：foo，arg的值是"foo"。
modifiers：一個包含修飾符的對象，例如v-my-directive.foo.bar，修飾符對象modifiers的值是{foo：true，bar：true}。
vnode：Vue編譯生成的虛擬節(jié)點。
oldVnode：上一個虛擬節(jié)點，僅在update和componentUpdated鉤子中可用。

輸出相關(guān)屬性

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../js/vue.js"></script>
	</head>
	<body>
		<div id="app" v-hh:a.b.c="mess">
		</div>
		<script>
			Vue.directive('hh',{
				bind: function(el,binding,vnode){
					var s = JSON.stringify
					el.innerHTML = 'name:'+s(binding.name)+'<br>'+
					'value:'+s(binding.value)+'<br>'+
					'expression:'+s(binding.expression)+'<br>'+
					'argument:'+s(binding.arg)+'<br>'+
					'modifiers:'+s(binding.modifiers)+'<br>'+
					'vnode keys:'+Object.keys(vnode).join(',')
				}
			})
			new Vue({
				el:'#app',
				data:{
					mess:'abc'
				}
			})
		</script>
	</body>
</html>

運用例子

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../js/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<div v-hh="{text:'123',c:'blue'}"></div>
		</div>
		<script>
			Vue.directive('hh',function(el,binding){
				el.innerHTML=binding.value.text
				el.style.color=binding.value.c
			})
			new Vue({
				el:'#app'
			})
		</script>
	</body>
</html>