自定義一個demo指令

自定義指令語法如下：

Vue.directive(id,definition)

傳入的兩個引數，id是指指令ID，definition是指定義物件。其中，定義物件可以提供一些鉤子函式。

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

<script>
	// 註冊一個全域性自定義指令 v-focus
	Vue.directive("focus",{
		// 當繫結元素插入到 DOM 中。
		inserted(el,binding) {
			// 聚焦元素
			el.focus();
		}
	})
</script>

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

<script>
	// 全域性指令
    Vue.directive('demo',function (el,binding) {
        console.log(el)      //p標籤
        console.log(binding) //輸出的是一個物件obj
        console.log('指令名:'+binding.name)//指令名
        console.log('指令的繫結值:'+binding.value)//指令的繫結值
        console.log('繫結值的字串形式:'+binding.expression) //繫結值的字串形式
        console.log('傳給指令的引數:'+binding.arg)//傳給指令的引數
    })
    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',binding) {
        console.log(el) // p標籤
        console.log(binding) // 輸出的是一個物件obj
        console.log(binding.value) // {color: 'blue',text: 'hello!'}
        console.log(binding.value.color) // 'blue'
        console.log(binding.valuewww.cppcns.com
 
.text) // 'hello!'
        el.style = 'color:' + binding.value.color  
    })
    var vm = new Vue({
        el: "#app",data: {
            colours: {
                color: 'blue',text: 'hello!'
            }
        }
    })
</script>

生命週期鉤子

指令定義函式提供了幾個鉤子函式（可選）：

1. bind：只調用一次，指令第一次繫結到元素時呼叫，用這個鉤子函式可以定義一個繫結時執www.cppcns.com行一次的初始化動作。
2. inserted：被繫結元素插入父節點(div#app)時呼叫（父節點存在即可呼叫，不必存在於document中）。
3. update：當繫結指令的元素(VNode-虛擬節點)狀態發生改變時觸發（包括樣式、內容、vue資料…）
4. componentUpdated：指令所在的元件的VNode以及其子VNode 全部更新後呼叫。
5. unbind：只調用一次，指令與元素解綁（元素從DOM中刪除）時呼叫。

<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',{ //五個註冊指令的鉤子函式
        bind: function () { //1.被繫結
	        //做繫結的準備工作。比如新增事件監聽器，或是其他只需要執行一次的複雜操作
            console.log('1 - bind');
        },inserted: function () { //2.繫結到節點
            console.log('2 - inserted');
        },update: function () { //grbGVZKc3.元件更新
            //根據獲得的新值執行對應的更新。對於初始值也會呼叫一次
            console.log('3 - update');
        },componentUpdated: function () { //4.元件更新完成
            console.log('4 - componentUpdated');
        },unbind: function () { //5.解綁
            //做清理操作。比如移除bind時繫結的事件監聽器
            console.log('5 - bind');
        }
    })
    var vm = new Vue({
        el: "#app",data: {
            num: 10,color: 'red'
        },methods: {
            add: function () {
                this.num++;
            }
        }
    })
</script>

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

到此這篇關於Vue. directive自定義指令詳解的文章就介紹到這了,更多相關Vue.js directive自定義指令內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！