vue怎么自定義指令？？

最近看看vue中自定義指令，感覺vue的指令和angular1的指令相差較大

<script>
    
    //指令鈎子函數：
    /*
    bind   只調用一次，指令第一次綁定到元素的時調用
    inserted 被指令綁定指令的元素插入 父節點的時候調用
    update  被綁定的元素模版只要發生變化，就會觸發（通過比較模板變化前后）
    componentUpdated 被綁定元素所在模版完成一次更新周期時被觸發
    unbind 指令被解除綁定的時候
    */

/*
定義指令回調函數（鈎子函數的幾個參數的意義）
第一個參數：綁定指令的元素html
第二個參數：對象的形式輸出，自定義指令的信息（指令名字，使用的名字，包括我們傳入的值，我們可以利用這個參數，在鈎子函數中進行相關操作），
第三個參數：輸出綁定指令的元素的虛擬dom節點信息
*/
    const selfcomponent={
        template:`<div>
         <p>自定義組件</p>    
         <input v-model="com"/>
         <p v-my-dir="com">組件的內容:跟隨變色</p>
        </div>`,
        //props:['color'],
        data(){
            return { com:'#ddd'}//給一個默認值
        },
        directives:{
            "myDir":{//指令的名字
            bind:function(el,binding,nodeDom){
                 console.log(binding);
                 console.log("bind");
                 el.style="color:"+binding.value;
            },

            inserted:function(){
                console.log("instered");
            },
            update:function(el,binding,nodeDom){//每次在input中輸入信息，都會觸發這個函數
                console.log("update");
                el.style="color:"+binding.value;
            },
            componentUpdated:function(el,bindging,nodeDom){
                console.log("componented");
            
            },        
            unbind:function(el,binding,nodeDom){
                console.log("unbind");
            }    
         }
            
        }
        
    };

　　var app =new Vue({
　　　　el:"#app",
　　　　data:{
　　　　　　color:'red',
 　　　　},
　　　　methods:{
　　
　　　　},
　　　　components:{
　　　　　　selfcomponent
　　　　}
　　});

</script>

<div id="app">
     <selfcomponent ></selfcomponent>                             
</div>

以上實現的效果是，在輸入框輸入顏色信息，例如：red,#ddd.....組件中的信息，會隨着你輸入的信息變色

 

當然也可以全局定義指令：

 Vue.directive("mydirective",function(el,pra,a){
        console.log(el);//將元素標簽輸出
        console.log(pra);//議對象的形式輸出，自定義指令的信息，（包括我們傳入的值）
        console.log(a);//以對象的形式輸出，vue虛擬節點信息
            //console.log(document.getElementsByTagName("li")[0].parentNode);
            el.style="color:"+pra.value;
    });