vue自定義指令 directive

vue.direactive 是什麼？

在vue框架中，我們開發者，時常使用vue自帶的指令，比如v-on，v-for，v-modal等等。
同樣的，vue提供給開發者一些鉤子，用以幫助開發者自定義vue指令，用法和v-on等是一樣的。

vue.direactive如何使用？

//在html方面，直接在標籤上綁定，但是要添加上v-
<div id="app">
    <!--#ff4200如果不用單引號引上的話會被當作data裏的變量，數字則無影響-->
    <input type="text" id="text" v-color="'#ff4200'">
</div>
//在js方面，通過Vue.direactive實現全局的directive
//這個vue鉤子一共有兩個參數，
//第一參數是字符串，字符串就是自定義指令的名稱，用到標籤上的時候，需要添加v-
//第二參數是對象，對象裏面有三個比較特殊的方法，bind是其中一個
Vue.directive('color', {
    bind: function (el,binding) {  //形參名字可隨意，但一般是這麼寫
        console.log(binding.name)   //color
        console.log(binding.value)  //#ff4200
    }
})

vue.direactive第二個參數中三個重要的方法

//註冊一個全局自定義指令
    Vue.directive('focus', {
//每當指令綁定到元素上時，會立即執行這個bind函數，只執行一次
        bind: function () {

        },
//inserted表示元素插入到DOM中時，會執行inserted函數，
//insert方法只觸發一次，el表示被綁定的那個標籤元素
        inserted: function (el) {
            el.focus()
        },
 //當VNode更新時會執行updated，可能觸發多次
        updated:function(){
        }
    })

和js行爲有關的操作，最好在inserted中執行，和css相關的操作都可在bind中執行

bind inserted updated 三個方法的參數

這三個方法都有兩個參數，第一個參數是綁定自定義指令的元素標籤本身，第二個參數是binding對象
其中binding對象有三個重要的屬性name，value，expresstion
name： 自定義指令的名稱是一個字符串，不包括v-
value： 就是自定義指令被賦予的值
expression： 就是自定義指令等於符號後面“”內的所有內容，可以是一個表達式，值的本身是一個字符串

<div id="app">
    <!--#ff4200如果不用單引號引上的話會被當作data裏的變量，數字則無影響-->
    <input type="text" id="text" v-color="1+1">
</div>
Vue.directive('color', {
    bind: function (el,binding) {  //形參名字可隨意，但一般是這麼寫
        console.log(binding.name)   //color
        console.log(binding.value)  //2
        console.log(binding.expression) // 1+1 
    }
})