Vue自定義指令詳解

更新時(shí)間：2022年12月24日 14:48:49 作者：Nanchen_42

這篇文章主要介紹了Vue自定義指令詳解,需要的朋友可以參考下

除了一些Vue中自帶的核心指令（v-model以及v-show）以外，Vue也可以自定義注冊(cè)指令

就可以使用directives選項(xiàng)來注冊(cè)指令

下面將用全局和局部的方式使用v-focus，來實(shí)現(xiàn)頁面加載時(shí)自動(dòng)獲得焦點(diǎn)的功能

這里只用到了inserted和el參數(shù)即可實(shí)現(xiàn)

第一種全局寫法：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
    <title>Document</title>
</head>
<body>
    <div id="app">
        <p>頁面載入時(shí)，input元素自動(dòng)獲取焦點(diǎn)：</p>
        <input type="text" v-focus>
    </div>
    <script>
        Vue.directive('focus', {
            inserted(el) {
                el.focus()
            }
        });
        const app = new Vue({
            el:"#app",
        })
    </script>
</body>
</html>

第二種局部寫法：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
    <title>局部寫法</title>
</head>
<body>
    <div id="app">
        <p>頁面載入時(shí)，input元素自動(dòng)獲取焦點(diǎn)：</p>
        <input type="text" v-focus>
    </div>
    <script>
        const app = new Vue({
            el:"#app",
            methods:{
 
            },
            // 注意：這里加s，在全局寫法中無需加s
            directives:{
                focus:{
                    inserted(el){
                        el.focus();
                    }
                }
            }
        })
    </script>
</body>
</html>

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

bind: 只調(diào)用一次，指令第一次綁定到元素時(shí)調(diào)用，用這個(gè)鉤子函數(shù)可以定義一個(gè)在綁定時(shí)執(zhí)行一次的初始化動(dòng)作。

inserted: 被綁定元素插入父節(jié)點(diǎn)時(shí)調(diào)用（父節(jié)點(diǎn)存在即可調(diào)用，不必存在于 document 中）。

update: 被綁定元素所在的模板更新時(shí)調(diào)用，而不論綁定值是否變化。通過比較更新前后的綁定值，可以忽略不必要的模板更新（詳細(xì)的鉤子函數(shù)參數(shù)見下）。

componentUpdated: 被綁定元素所在模板完成一次更新周期時(shí)調(diào)用。

unbind: 只調(diào)用一次，指令與元素解綁時(shí)調(diào)用。

鉤子函數(shù)的參數(shù)有：

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

了解自定義指令的相關(guān)參數(shù)，這里是說能用到的，看下面代碼

效果如下圖所示：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>了解自定義指令的相關(guān)參數(shù)</title>
		<script src="https://cdn.jsdelivr.net/npm/vue"></script>
	</head>
	<body>
		<div id="app" v-num:hello.a.b="message">
			
		</div>
		<script type="text/javascript">
		Vue.directive('num',{
			bind(el,binding){
				var s= JSON.stringify;
				el.innerHTML = 
				'name:' + s(binding.name)+'<br>'+
				'value' + s(binding.value) + '<br>' +
				"expression"+s(binding.expression) +'<br>'+
				"arg"+ s(binding.arg)+'<br>'+
				'modifiers'+s(binding.modifiers)+'<br>'
			}
		})
			const vm = new Vue({
				el:'#app',
				data(){
					return{
						message:'你好'
					}
				},
			})
		</script>
	</body>
</html>

一般binging里面這五種方法會(huì)被用到

無需其他鉤子函數(shù)的簡(jiǎn)化：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue"></script>
	</head>
	<body>
		<div id="app" v-num="{color:'gray',text:'NanChen'}">
			<!-- 我這里只想設(shè)置message的值的顏色就可以不用到鉤子函數(shù)，直接進(jìn)行簡(jiǎn)寫 -->
		</div>
		<script type="text/javascript">
		Vue.directive('num',function(el,binging){
				console.log(el);
				console.log(binging.value);
				// 把獲取到的文字給el并顯示出來
			el.innerHTML = binging.value.text
			// 把獲取到的顏色傳給el樣式
			el.style.backgroundColor =  binging.value.color
		})
			const vm = new Vue({
				el:'#app',
			})
		</script>
	</body>
</html>

效果如下：

當(dāng)然也可以寫多個(gè)自定義指令：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue"></script>
	</head>
	<body>
		<!-- 自定義指令中如果是對(duì)象則使用value來顯示值，如果是變量那就使用expression -->
		<div id="app" v-num="{color:'gray',text:'NanChen'}" v-num2="message">
			<!-- 我這里只想設(shè)置message的值的顏色就可以不用到鉤子函數(shù)，直接進(jìn)行簡(jiǎn)寫 -->
		</div>
		<script type="text/javascript">
		
		Vue.directive('num',function(el,binging){
				console.log(el);
				console.log(binging.value);
				// 把獲取到的文字給el并顯示出來
			el.innerHTML = binging.value.text
			// 把獲取到的顏色傳給el樣式
			el.style.backgroundColor =  binging.value.color
		})
			const vm = new Vue({
				el:'#app',
				methods:{
					message:'歡迎光臨！'
				},
				directives:{
					num2:{
						inserted:function(el,binging){
							console.log(el);
							console.log(binging.expression);
							el.innerHTML = binging.expression
						}
					}
				}
			})
		</script>
	</body>
</html>

效果：（這里前面的el.innerHTML會(huì)被覆蓋）