<script>
    
    //指令鉤子函數(shù)：
    /*
    bind   只調(diào)用一次，指令第一次綁定到元素的時(shí)調(diào)用
    inserted 被指令綁定指令的元素插入 父節(jié)點(diǎn)的時(shí)候調(diào)用
    update  被綁定的元素模版只要發(fā)生變化，就會(huì)觸發(fā)（通過比較模板變化前后）
    componentUpdated 被綁定元素所在模版完成一次更新周期時(shí)被觸發(fā)
    unbind 指令被解除綁定的時(shí)候
    */

/*
定義指令回調(diào)函數(shù)（鉤子函數(shù)的幾個(gè)參數(shù)的意義）
第一個(gè)參數(shù)：綁定指令的元素html
第二個(gè)參數(shù)：對象的形式輸出，自定義指令的信息（指令名字，使用的名字，包括我們傳入的值，我們可以利用這個(gè)參數(shù)，在鉤子函數(shù)中進(jìn)行相關(guān)操作），
第三個(gè)參數(shù)：輸出綁定指令的元素的虛擬dom節(jié)點(diǎn)信息
*/
    const selfcomponent={
        template:`<div>
         <p>自定義組件</p>    
         <input v-model="com"/>
         <p v-my-dir="com">組件的內(nèi)容:跟隨變色</p>
        </div>`,
        //props:['color'],
        data(){
            return { com:'#ddd'}//給一個(gè)默認(rèn)值
        },
        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中輸入信息，都會(huì)觸發(fā)這個(gè)函數(shù)
                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>