Vue.js 自定义指令

简介:

自定义指令


除了默认设置的核心指令(如:v-model,v-for),Vue.js也允许注册自定义指令,自定义指令提供一种机制将数据的变化映射为DOM行为


Vue.js用 Vue.directive(id, definition)方法注册一个全局自定义指令,它接收两个参数:指令ID和定义对象。也可以用组建的directives选项注册一个局部自定义指令


例如:聚焦一个 input 元素

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
< div  id = "directive-focus" >
     < input  v-focus>
</ div >
 
< script  src = "//cdn.bootcss.com/vue/2.0.7/vue.js" ></ script >
< script >
     // 注册一个全局自定义指令 v-focus
     Vue.directive('focus',{
         //将绑定元素插入到 DOM 中
         inserted:function(el){
             // 聚焦元素
             el.focus();
         }
     })
     new Vue({
         el:'#directive-focus'
     })
</ script >


当页面加载时,元素将获得焦点。事实上,你访问后还没点击任何内容,input 就获得了焦点。


也可以注册局部指令,组件中接受一个 directives 的选项:

1
2
3
4
5
directives: {
     focus: {
         // 指令的定义---
     }
}


钩子函数

Vue.js提供了几个钩子函数(都是可选的,相互之间没有制约关系):

bind  --  只调用一次,指令第一次绑定到元素上时使用,用这个钩子函数可以定义一个在绑定时执行一次的初始化动作


inserted  --  被绑定元素插入父节点时调用(父节点存在即可调用,不必存在document中)


update  --  被绑定元素所在的模板更新时调用,而不论绑定值是否变化。通过比较更新前后的绑定值,可以忽略不必要的模板更新


componentUpdated  --  被绑定元素所在的模板完成一次更新周期时调用 


unbind  --  只调用一次,指令与元素解绑时调用


1
2
3
4
5
6
7
8
9
10
11
12
13
14
Vue.directive( 'my-directive' ,{
     bind: function (){
         //准备工作
         //例如,添加事件处理器或只需要运行一次的高耗任务
     },
     update: function (newValue, oldValue){
         //值更新时的工作
         //也会以初始值为参数调用一次
     },
     unbind: function (){
         //清理工作
         //例如,删除bind()添加的事件监听器
     }
})


在注册之后,便可以在Vue.js模板中这样用(记着添加前缀 v-):

1
< div  v-my-directive = "someValue" ></ div >


当只需要update函数时,可以传入一个函数替代定义对象:

1
2
3
Vue.directive( 'my-directive' , function (value){
     //这个函数用作update()
})



钩子函数参数

所有的钩子函数都将被复制到实际的指令对象中,在钩子内,this指向这个指令对象。


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 }

        descriptor  --  一个对象,包含指令的解析结果


vnode  --  Vue编译生成的虚拟节点


oldVnode  --  上一个虚拟节点,仅在update和componentUpdated钩子中可用


vm  --  拥有该指令的上下文ViewModel


除了 el 之外,其它参数都应该是只读的,尽量不要修改他们。如果需要在钩子之间共享数据,建议通过元素的 dataset 来进行。


一个使用了这些参数的自定义钩子样例:

HTML:

1
< div  id = "hook-argument-example"  v-demo:hello.a.b = "message" ></ div >


JS:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
Vue.directive( 'demo' ,{
     bind: function (el,binding,vnode){
         var  s = JSON.stringify;
         el.innerHTML =  'name:' +s(binding.name)+ '<br>' +
                         'value:' +s(binding.value)+ '<br>' +
                         'expression:' +s(binding.expression)+ '<br>' +
                         'argument:' +s(binding.argument)+ '<br>' +
                         'modifiers:' +s(binding.modifiers)+ '<br>' +
                         'vnode keys:' +Object.keys(vnode).join( ',' )
     }
})
new  Vue({
     el: '#hook-argument-example' ,
     data:{
         message: 'hello'
     }
})


页面效果截图:

wKiom1gv6FuR_YK1AACJxEwPtBQ695.png


函数简写

大多数情况下,我们可能想在 bind 和 update 钩子上做重复动作,并且不想关心其它的钩子函数。可以这样写:

1
2
3
Vue.directive( 'color-swatch' function  (el, binding) {
     el.style.backgroundColor = binding.value
})



对象字面量

如果指令需要多个值,可以传入一个 JavaScript 对象字面量。记住,指令函数能够接受所有合法类型的 Javascript 表达式。

1
2
3
4
5
6
7
8
9
10
11
12
< div  id = "demo"  v-demo = "{color:'red', text:'hello!'}" ></ div >
 
< script  src = "//cdn.bootcss.com/vue/2.0.7/vue.js" ></ script >
< script >
     Vue.directive('demo',function(el,binding){
         console.log(binding.value.color);
         console.log(binding.value.text);
     })
     var demo = new Vue({
         el:'#demo'
     })
</ script >

wKiom1gv6wfA6WYDAAArxV5-FPQ415.png

本文转自   frwupeng517   51CTO博客,原文链接:http://blog.51cto.com/dapengtalk/1874582

相关文章
|
1月前
|
JavaScript
【vue】 vue2 自定义指令 实现全屏 、对话框拖拽
【vue】 vue2 自定义指令 实现全屏 、对话框拖拽
55 2
|
1月前
|
JavaScript
vue3自定义指令
vue3自定义指令
|
1月前
|
JavaScript
Vue3 自定义指令
Vue3 自定义指令
|
1月前
|
JavaScript
vue自定义指令详解
【4月更文挑战第5天】Vue自定义指令用于扩展模板功能,通过`Vue.directive()`全局或组件内注册。它们有生命周期钩子函数,如`bind`、`inserted`等,在不同阶段执行相应操作。在模板中以`v-`前缀或简写形式使用,可接受参数和修饰符来定制行为。
27 8
|
1月前
|
JavaScript 前端开发 UED
教你用vue自定义指令做一个组件的遮罩层loading效果
教你用vue自定义指令做一个组件的遮罩层loading效果
|
1月前
|
JavaScript
Vue自定义指令的三个方法
Vue自定义指令的三个方法
11 0
|
1月前
|
JavaScript
vue自定义指令
vue自定义指令
20 0
|
1月前
|
JavaScript 前端开发
vue自定义指令_按钮权限设计(从0创建项目开始设计)
vue自定义指令_按钮权限设计(从0创建项目开始设计)
27 1
|
1月前
|
JavaScript
【Vue】自定义指令
【Vue】自定义指令
|
1月前
|
JavaScript 前端开发 开发者
Vue的自定义指令:创建自定义指令的技术详解
【4月更文挑战第24天】Vue.js 允许开发者创建自定义指令以扩展其功能。自定义指令提供灵活性,但需根据需求和最佳实践谨慎使用。

热门文章

最新文章