快捷導(dǎo)航

Vue.js directive自定義指令詳解

更新時間：2021年09月14日 09:19:34 作者：貓老板的豆

這篇文章主要介紹了Vue.js directive自定義指令詳解,本篇文章通過簡要的案例,講解了該項技術(shù)的了解與使用,以下就是詳細內(nèi)容,需要的朋友可以參考下

自定義一個demo指令

Vue自定義指令語法如下：

Vue.directive(id, definition)

傳入的兩個參數(shù)，id是指指令I(lǐng)D，definition是指定義對象。其中，定義對象可以提供一些鉤子函數(shù)。

<div id="app">
	<!-- input輸入框獲得焦點 -->
	<input type="text" v-focus/>
</div>

<script>
	// 注冊一個全局自定義指令 v-focus
	Vue.directive("focus", {
		// 當(dāng)綁定元素插入到 DOM 中。
		inserted(el, binding) {
			// 聚焦元素
			el.focus();
		}
	})
</script>

<div id="app">
    <p v-demo:red="msg">{{msg}}</p>
</div>

<script>
	// 全局指令
    Vue.directive('demo', function (el, binding) {
        console.log(el)      //p標(biāo)簽
        console.log(binding) //輸出的是一個對象obj
        console.log('指令名:'+binding.name)//指令名
        console.log('指令的綁定值:'+binding.value)//指令的綁定值
        console.log('綁定值的字符串形式:'+binding.expression) //綁定值的字符串形式
        console.log('傳給指令的參數(shù):'+binding.arg)//傳給指令的參數(shù)
    })
    var vm = new Vue({
        el: "#app",
        data: {
            msg: 'hello!'
        },
        // 局部指令
        directives:{
			demo:{
				inserted: function (el) {
					console.log(el)
				}      
			}
		}
    })
</script>

這里寫圖片描述

對象字面量

<div id="app">
    <p v-demo="colours">{{colours.text}}</p>
</div>

<script>
    Vue.directive('demo', function (el, binding) {
        console.log(el) // p標(biāo)簽
        console.log(binding) // 輸出的是一個對象obj
        console.log(binding.value) // {color: 'blue',text: 'hello!'}
        console.log(binding.value.color) // 'blue'
        console.log(binding.value.text) // 'hello!'
        el.style = 'color:' + binding.value.color  
    })
    var vm = new Vue({
        el: "#app",
        data: {
            colours: {
                color: 'blue',
                text: 'hello!'
            }
        }
    })
</script>

生命周期鉤子

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

bind：只調(diào)用一次，指令第一次綁定到元素時調(diào)用，用這個鉤子函數(shù)可以定義一個綁定時執(zhí)行一次的初始化動作。
inserted：被綁定元素插入父節(jié)點(div#app)時調(diào)用（父節(jié)點存在即可調(diào)用，不必存在于document中）。
update：當(dāng)綁定指令的元素(VNode-虛擬節(jié)點)狀態(tài)發(fā)生改變時觸發(fā)（包括樣式、內(nèi)容、vue數(shù)據(jù)…）
componentUpdated：指令所在的組件的VNode以及其子VNode 全部更新后調(diào)用。
unbind：只調(diào)用一次，指令與元素解綁（元素從DOM中刪除）時調(diào)用。

<div id="app">
    <p v-demo="color">{{num}}</p>
    <button @click="add">增加</button>
    <button onclick='unbind()'>解綁</button>
</div>

<script>
    function unbind() {
        vm.$destroy(); //另外起一個方法解綁
    }
    Vue.directive('demo', { //五個注冊指令的鉤子函數(shù)
        bind: function () { //1.被綁定
	        //做綁定的準(zhǔn)備工作。比如添加事件監(jiān)聽器，或是其他只需要執(zhí)行一次的復(fù)雜操作
            console.log('1 - bind');
        },
        inserted: function () { //2.綁定到節(jié)點
            console.log('2 - inserted');
        },
        update: function () { //3.組件更新
            //根據(jù)獲得的新值執(zhí)行對應(yīng)的更新。對于初始值也會調(diào)用一次
            console.log('3 - update');
        },
        componentUpdated: function () { //4.組件更新完成
            console.log('4 - componentUpdated');
        },
        unbind: function () { //5.解綁
            //做清理操作。比如移除bind時綁定的事件監(jiān)聽器
            console.log('5 - bind');
        }
    })
    var vm = new Vue({
        el: "#app",
        data: {
            num: 10,
            color: 'red'
        },
        methods: {
            add: function () {
                this.num++;
            }
        }
    })
</script>

初始化觸發(fā)方法1和2，點擊增加按鈕觸發(fā)方法3和4，點擊解綁按鈕觸發(fā)方法5，如下圖：

這里寫圖片描述