Vue的指令以v-
开头,作用在HTML元素上,将指令绑定在元素上,给绑定的元素添加一些特殊行为:
钩子函数
定义对象的钩子函数如下:
钩子函数参数如下:
定义对象的钩子函数参数如下:
- el: 指令所绑定的元素,可以用来直接操作 DOM 。
- binding: 一个对象,包含以下属性:
- name: 指令名,不包括
v-
前缀。 - value: 指令的绑定值, 例如:
v-my-directive="1 + 1"
,value 的值是2
。 - oldValue: 指令绑定的前一个值,仅在
update
和componentUpdated
钩子中可用。无论值是否改变都可用。 - expression: 绑定值的字符串形式。 例如
v-my-directive="1 + 1"
, expression 的值是"1 + 1"
。 - arg: 传给指令的参数。例如
v-my-directive:foo
, arg 的值是"foo"
。 - modifiers: 一个包含修饰符的对象。 例如:
v-my-directive.foo.bar
, 修饰符对象 modifiers 的值是{ foo: true, bar: true }
。
- name: 指令名,不包括
- vnode: Vue 编译生成的虚拟节点。
- oldVnode: 上一个虚拟节点,仅在
update
和componentUpdated
钩子中可用。
Vue.directive('my-directive', {
bind: function(){
//做绑定的准备工作
//比如添加事件监听器,或是其他只需要执行一次的复杂操作
},
inserted: function(){
//...
},
update: function(){
//根据获得的新值执行对应的更新
//对于初始值也会调用一次
},
componentUpdated: function(){
//...
},
unbind: function(){
//做清理操作
//比如移除bind时绑定的事件监听器
}
})
举个栗子:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="box" v-red>
{{msg}}
</div>
<!--<script src="lib/vue 2.1.10.js"></script>-->
<script src="//cdn.bootcss.com/vue/2.1.10/vue.js"></script>
<script>
Vue.directive('red',{
inserted:function(el){
el.style.background="red";
}
})
window.οnlοad=function(){
var vm=new Vue({
data:{
msg:"abcde"
}
}).$mount("#box");
}
</script>
</body>
</html>