Vue全局API
Vue自定义指令
1.定义一个全局指令，调用Vue中的Vue.directive()
例子：
点击按钮，实现加分的功能；
当点击加分按钮时，字体的大小发生改变。
初始化时总分是1，通过点击按钮进行加分。
利用自定义指令控制style样式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>这是对vue自定义指令的复习</title>
<script src="../assets/js/vue.js" type="text/javascript"></script>
</head>
<body>
<div id="app">
<div v-liu="color">运用vue的自定义指令</div>
<hr />
<div v-chen="font">Vue自定义指令的生命周期</div>
<div v-chen='font'>总分：{{numbers}}</div>
<button v-on:click="add()">加分</button>
</div>
<script type="text/javascript">
Vue.directive('liu',function(el,binding){
el.style='color:'+binding.value;
})
Vue.directive('chen',{
bind:function(){
console.log("1-bind")
},
inserted:function(){
console.log("2-inserted")
},
update:function(el,binding){
el.style="font-size:"+binding.value;
console.log("3-update")
},
componentUpdated:function(){
console.log("4-componentUpdated")
}
})
var demo=new Vue({
el:'#app',
data:{
color:'green',
numbers:1,
font:'35px'
},
methods:{
add:function () {
this.numbers++;
}
}
})
</script>
</body>
</html>
还没点击“加分”按钮时：
点击加分按钮后：
Vue自定义指令的生命周期
五个生命周期，也叫做钩子函数。
- bind:只调用一次，指令第一次绑定到元素时调用，用这个钩子函数可以定义一个绑定时执行一次的初始化动作。
- inserted:被绑定元素插入父节点时调用
- update:被绑定于元素所在的模板更新时调用
- componentUpdated:被绑定元素所在模板完成一次更新周期时调用
- unbind:只调用一次，指令与元素解绑时调用
自定义指令传递的三个参数：
附加：
- el: 指令所绑定的元素，可以用来直接操作DOM。
- binding: 一个对象，包含指令的很多信息。
- vnode: Vue编译生成的虚拟节点。
