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>

 

posted @ 2018-02-27 14:45  Jinsuo  阅读(322)  评论(0)    收藏  举报