<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>
