vue2.0—— Vue.directive

来源：互联网发布：服务器托管数据安全编辑：程序博客网时间：2024/05/29 03:59

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>全局API Vue.directive自定义指令 09</title>
<script src="../assets/js/vue.js"></script>
<link type="text/css" rel="stylesheet" href="../assets/css/index.css" />
</head>

<body>
<h1>全局API 自定义指令</h1>
<hr />
<div id="app">
<div v-wos.color="color" id="aaa">
{{num}}
</div>
<p>
<button @click="jia">+</button>
</p>
</div>
<button onclick="xiezai()">解绑</button>
<script>
function xiezai(){
vm.$destroy();
}
Vue.directive('wos',{ //我是全局API 是自定义指令
bind:function(el,binding,vnode){ //我加上下面的四个都是生命周期我是指令的生命周期
console.log('1-bind'); //当被绑定
var s = JSON.stringify;
el.innerHTML =
'name' + s(binding.name) + '<br>' +
'value' + s(binding.value) + '<br>' +
'expression' + s(binding.expression) + '<br>'+
'modifiers' + s(binding.modifiers)

el.style = 'color:'+binding.value
},
inserted:function(){//当绑定到节点已经插入完成了
console.log('2-inserted');
},
update:function(el,binding,vnode){//组件更新
console.log('3-update');
el.style = 'color:green'
},
componentUpdated:function(){//组件更新完成
console.log('4-componentUpdated');
},
unbind:function(){//卸载解绑
console.log('5-unbind');
}
}
);

//全局API是不在构造器里面通过构造器的命名给Vue写一些全局的全局API建议写在构造器的上面
var vm = new Vue({ //建立一个构造器
el:"#app", //构造器的作用域在哪里
data:{
num:10,
color:'red'
},
methods:{
jia:function(){
this.num++;
}
}
});

</script>
<script src="./webpack.js"></script>
</body>
</html>

0 0