Vue自定義指令詳解

Posted on by

除瞭一些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/[email protected]/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/[email protected]/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自定義指令的資料請關註WalkonNet其它相關文章！

推薦閱讀：