自己定義的vue指令

vue常用指令

vue有給我們提供固定的指令：
v-bind：綁定屬性，可以簡寫爲 : 也稱爲動態獲取
v-text：只顯示{{}} 裏的內容
v-html：可以渲染標籤 如<h1>{{}}</h1>
v-on：綁定事件 可以簡寫爲 @
v-for：循環數組
v-model：雙向綁定
v-show：給屬性添加 display：true false
v-if v-else if v-else 常常用在一起 添加條件判斷
v-clock：style裏寫[ v-clock] { display:none} 解決閃爍問題
v-pre 告訴vue不需要解析，沒有插值表達式
v-once 告訴vue需要解析且只解析一次

自定義指令

實現一個與v-text 功能一樣的自定義指令

<div id="app">
        <h1 v-mytext="msg"></h1>
    </div>
    <script src="./node_modules/vue/dist/vue.js"></script>
    <script>
        Vue.directive('mytext',{
            bind:function(el,binding){
                el.innerText=binding.value
                console.log(binding)
            },
            update:function(el,binding){
                el.innerText=binding.value
            }
        })
        const app = new Vue({
            el: "#app",
            data: {
                msg:'hello'
            }
        })
    </script>

自定義指令用directive（）來寫，它有兩個參數，第一個參數爲指令的名稱，也就是上文的mytext；第二個參數是一個對象，也就是指令的配置，對象裏邊的都是鍵值對，鍵有固定的五種，分別是五種鉤子函數，bind、inserted、update、componentUpdated、unbind、 值呢就是對應的處理函數。
指令的鉤子函數會傳入參數，分別是el binding vnode oldvnode 但是常用的就是el 和 binding

最基本的自定義指令就完成了。