利用vue.directive自定义指令并实现绑定和解绑
实现界面
vue.directive.html文件
<!DOCTYPE html>
<html lang="en">
<head>
<title>vue.directive自定义指令实例</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script type='text/javascript' src='../assets/js/vue.js' ></script>
</head>
<body>
<h1>vue.directive自定义指令实例啦</h1>
<hr>
<div id="app" >
<!-- 模板的输出方式，把message变量渲染到模板里 -->
自定义指令v-Jason
<div v-Jasonniu='color'> {{num}} </div>
<p> <button @click='add'> ADD </button> </p>
</div>
<p>
<!-- js的原生定义方法 -->
<button onclick='unbind()'>解绑</button>
</p>
<script type='text/javascript'>
function unbind(){
app.$destroy();
}
//声明变量且实例化(生成器)
Vue.directive('Jasonniu',{
bind:function(el,binding){//被绑定
console.log('1 - bind');
el.style='color:'+binding.value;
},
inserted:function(){//绑定到节点
console.log('2 - inserted');
},
update:function(){//组件更新
console.log('3 - update');
},
componentUpdated:function(){//组件更新完成
console.log('4 - componentUpdated');
},
unbind:function(){//解绑
console.log('5 - unbinding');
}
});
// el.style='color:'+binding.value;
var app =new Vue({
el:'#app',
data:{
num:10,
color:'red'
},
//写方法
methods:{
add:function(){
this.num++;
}
}
})
</script>
</body>
</html>