您的位置：首页 > 产品设计 > UI/UE

vue2.0 自定义指令

2017-02-25 22:14 309 查看
Vue的指令以
v-
开头，作用在HTML元素上，将指令绑定在元素上，给绑定的元素添加一些特殊行为:


钩子函数

定义对象的钩子函数如下:
钩子函数描述
bind只调用一次，指令第一次绑定到元素时调用，用这个钩子函数可以定义一个在绑定时执行一次的初始化动作
inserted被绑定元素插入父节点时调用（父节点存在即可调用，不必存在于 document 中）
update被绑定元素所在的模板更新时调用，而不论绑定值是否变化。通过比较更新前后的绑定值，可以忽略不必要的模板更新
componentUpdated被绑定元素所在模板完成一次更新周期时调用
unbind只调用一次，指令与元素解绑时使用钩子函数参数
钩子函数参数如下：

定义对象的钩子函数参数如下：
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 }
。

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.onload=function(){
var vm=new Vue({
data:{
msg:"abcde"
}
}).$mount("#box");
}
</script>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航