(一)Vue.directive指令(自定义指令)
2018-02-14 本文已影响0人
我拥抱着我的未来
本节知识点
- 全局api
- Vue.directive指令
- 自定义指令的生命周期
全局api概述
- 全局api并不在构造器里面，而是先声明全局变量或者直接在vue中定义一些新功能，VUE内置了一些全局api,说简单点就是在构造器外面用vue提供给我们的api函数来定义新的功能.
Vue.directive 指令
-
我们在第一季学习了内部指令，但是我们想要定义一个v-hello的指令，作用就是让文字变成绿色.
-
在开始之前先写一个小DEMO，页面上有一个数字是10，数字的下面有一个按钮，每次点击加1
-
代码如下
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1.0,maximum-scale=1.0">
<title>Title</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<span>{{message}}</span>
<button @click="add"> 点击开始加1</button>
</div>
</body>
<script>
var app = new Vue({
el:"#app",
data:{
message:10,
color: "green"
},
methods:{
add:function(){
this.message++;
}
}
})
</script>
</html>
- 下面让我们用vue.directive来写一个
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1.0,maximum-scale=1.0">
<title>Title</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<span v-hello="color3">{{message}}</span>
<button @click="add"> 点击开始加1</button>
</div>
</body>
<script>
Vue.directive("hello",function(el,binding,vnode){
el.style["color"]= binding.value;
})
var app = new Vue({
el:"#app",
data:{
message:10,
color3:"red"
},
methods:{
add:function(){
this.message++;
}
}
})
</script>
</html>
- 这里要说明的就是指令写的是v-hello,但是我们用directive的时候前面不用加v-了，直接输入指令即可
可以看到数字也变成绿色了，说明自定义指令也起作用了。 - el : 指令所绑定的元素，可以用来直接操作DOM
- binding: 一个对象，包含指令的很多信息
- vnode: VUE编译生成的虚拟节点
自定义指令的生命周期
自定义指令有5个生命周期(也叫作钩子函数)分别是bind ,inserted,update,componentUpdate,unbind
- 要是想解绑这个vue可以使用
function unbind(){
app.$destroy()
}
-
bind 只调用一次，指令第一次绑定到元素时候调用，用这个钩子可以定义一个绑定时执行一次的初始化动作。
-
inserted:被绑定的元素插入父节点的时候调用(父节点存在即可调用，不必存在document中)
-
update: 被绑定与元素所在模板更新时调用，而且无论绑定值是否有变化，通过比较更新前后的绑定值，忽略不必要的模板更新
-
componentUpdate :被绑定的元素所在模板完成一次更新更新周期的时候调用
-
unbind: 只调用一次，指令月元素解绑的时候调用
-
见下面代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1.0,maximum-scale=1.0">
<title>Title</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<span v-hello="color3">{{message}}</span>
<button @click="add"> 点击开始加1</button>
<button onclick="jiebang()">解绑</button>
</div>
</body>
<script>
function jiebang(){
app.$destroy();
}
Vue.directive("hello",{
bind:function(el,bingind,vnode){
el.style["color"] = bingind.value;
console.log("1-bind");
},
inserted:function(){
console.log("2-insert");
},
update:function(){
console.log("3-update");
},
componentUpdated:function(){
console.log('4 - componentUpdated');
},
unbind:function(){
console.log('5 - unbind');
}
})
var app = new Vue({
el:"#app",
data:{
message:10,
color3:"red"
},
methods:{
add:function(){
this.message++;
}
}
})
</script>
</html>
