Vue自定義指令詳解

2022-12-25 14:00:43

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

就可以使用directives選項來註冊指令

下面將用全域性和區域性的方式使用v-focus，來實現頁面載入時自動獲得焦點的功能

這裡只用到了inserted和el引數即可實現

第一種全域性寫法：

<!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>頁面載入時，input元素自動獲取焦點：</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>頁面載入時，input元素自動獲取焦點：</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>

指令定義函數提供了幾個勾點函數（可選）：

bind: 只呼叫一次，指令第一次繫結到元素時呼叫，用這個勾點函數可以定義一個在繫結時執行一次的初始化動作。

inserted: 被繫結元素插入父節點時呼叫（父節點存在即可呼叫，不必存在於 document 中）。

update: 被繫結元素所在的模板更新時呼叫，而不論繫結值是否變化。通過比較更新前後的繫結值，可以忽略不必要的模板更新（詳細的勾點函數引數見下）。

componentUpdated: 被繫結元素所在模板完成一次更新週期時呼叫。

unbind: 只呼叫一次，指令與元素解綁時呼叫。

勾點函數的引數有：

el: 指令所繫結的元素，可以用來直接操作 DOM 。
binding: 一個物件，包含以下屬性：
- name: 指令名，不包括 v- 字首。
- value: 指令的繫結值，例如： v-my-directive="1 + 1", value 的值是 2。
- oldValue: 指令繫結的前一個值，僅在 update 和 componentUpdated 勾點中可用。無論值是否改變都可用。
- expression: 繫結值的表示式或變數名。例如 v-my-directive="1 + 1" ， expression 的值是 "1 + 1"。
- arg: 傳給指令的引數。例如 v-my-directive:foo， arg 的值是 "foo"。
- modifiers: 一個包含修飾符的物件。例如： v-my-directive.foo.bar, 修飾符物件 modifiers 的值是 { foo: true, bar: true }。
vnode: Vue 編譯生成的虛擬節點。
oldVnode: 上一個虛擬節點，僅在 update 和 componentUpdated 勾點中可用。

瞭解自定義指令的相關引數，這裡是說能用到的，看下面程式碼

效果如下圖所示：

<!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: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裡面這五種方法會被用到

無需其他勾點函數的簡化：

<!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'}">
			<!-- 我這裡只想設定message的值的顏色就可以不用到勾點函數，直接進行簡寫 -->
		</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>

效果如下：

當然也可以寫多個自定義指令：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue"></script>
	</head>
	<body>
		<!-- 自定義指令中如果是物件則使用value來顯示值，如果是變數那就使用expression -->
		<div id="app" v-num="{color:'gray',text:'NanChen'}" v-num2="message">
			<!-- 我這裡只想設定message的值的顏色就可以不用到勾點函數，直接進行簡寫 -->
		</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會被覆蓋）

以上就是Vue自定義指令詳解的詳細內容，更多關於Vue自定義指令的資料請關注it145.com其它相關文章！

Vue自定義指令詳解

第一種全域性寫法：

第二種區域性寫法：

熱門文章