vue.directive自定義指令

時間 2019-11-30

標籤 vue.directive vue directive 自定義指令简体版

原文原文鏈接

<body>
    <h2>vue.directive自定義指令</h2>
    <div id="app">
    
            <p v-cai="color">{{num}}</p>
             <!-- <button v-on:click="add">Add</button> -->    
             <button @click="add">Add</button>
             <p><button onclick="unbind()">解綁</button></p>
        
    </div>
    
</body>
<script type="text/javascript">
    //全局API  在構造器外部用Vue提供給咱們的  api函數來定義新的功能
    // Vue.directive("cai",function(el,binding){  //  cai 是自定義api  名字。參數  el  是指 p標籤對象， binding是 接口數據對象            
    //     console.log(binding);
    //     console.log(el);
    //     el.style="color:"+binding.value;

    // });
    function unbind(){
        app.$destroy();//解綁   銷燬解綁  app爲   vue實例化化對象  變量app
    }
    Vue.directive("cai",{  //directive命令
        bind:function(el,binding){
            console.log('bind  只調用一次，指令第一次綁定到元素時調用，用這個鉤子函數能夠定義一個綁定時執行一次的初始化動做');
            el.style.color=binding.value;
        },
        inserted:function(){
            console.log("inserted 被綁定元素插入父節點時調用 父節點存在便可調用，沒必要存在於document中")
        },
        update:function(){
            console.log("update，被綁定於元素所在的模版更新時調用，而不管綁定值是否變化。經過比較更新先後的綁定值，能夠忽略沒必要要的模版更新")
        },
        componentUpdated:function(){
            console.log("componentUpdated，被綁定元素所在模版完成一次更新週期時調用")
        },
        unbind:function(){
            console.log("unbind，只調用一次，指令與元素解綁時調用")
        }
    })


    var app=new Vue({
        el:"#app",
        data:{
            num:10,
            color:'red'
        },
        methods:{   //   方法   名字固定
            add:function(){   //  add函數名  隨意寫
                this.num++;
            }
        }
    })
</script>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。