Vue自定義指令封裝及用法

Vue自定義指令

vue中的指令很多，例如v-if,v-for,v-model等等，當然尤大大也給我們提供了自定義屬性這一 玩意兒，讓我們也可自己定義指令,例如v-hello，v-fuck等等，那我們為什么需要自定義指令呢？那好，我就問你一句話，你在寫項目當中有沒有某一刻有想要操縱DOM 的沖動，但是vue很明確是不能直接操縱DOM的，那這時候就可以用到我們的自定義指令了。具體操作，如下所示：

主要是通過Vue.directive來定義!

  <script>
        Vue.directive('hello',{
            inserted(){//這個名字是固定的
                console.log("加油,中國！")
            }
        })
        var vm=new Vue({
            el:"#box"
        })
    </script>

具體用法：

    <div id="box">
        <div v-hello>加油，武漢!</div>
    </div>

當然了，我們的自定義指令也可以傳參。具體用法，如下所示：

其實道理一樣，只是我們傳遞了el和bind兩個參數。el是節點的意思，大家都知道，而bind是從哪兒來的呢？

  <script>
        Vue.directive('color',{
            inserted(el,bind){
                console.log(bind)
                el.style.background=bind.value
            }
        })
        var vm=new Vue({
            el:"#box"
        })
    </script>

通過打印bind我們可以看到，它包含我們指令的所有信息

在使用過程中我們需要注意的就是要將傳遞的參數當做字符串來傳，所以需要再加“ ”

接下來我們看一種情況

以我上面這種寫法，我在控制台當中通過vm.mycolor:"red"來改變mycolor的值

然而視圖並沒有更新，那是因為指令也是有生命周期的，inserted:插入（只執行一次）
所以要想達到上面的那種效果，我們要引進另一生命周期,update：更新階段

這樣，就達到了我們想要的效果了。