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