vue.js之 directive 自定義指令

自定義一個demo指令

Vue自定義指令文法如下：

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">{{msg}}</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>.directive('demo', function (el, 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.value.text) // 'hello!'
        el.style = 'color:' + binding.value.color  
    })
    var vm = new Vue({
        el: "#app",
        data: {
            colours: {
                color: 'blue',
                text: 'hello!'
            }
        }
    })</script>      

生命周期鈎子

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

1. ​

   ​bind​

   ​：隻調用一次，指令第一次綁定到元素時調用，用這個鈎子函數可以定義一個綁定時執行一次的初始化動作。
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 () { //3.元件更新
            //根據獲得的新值執行對應的更新。對于初始值也會調用一次
            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>