vue自定义指令实现方法详解-创新互联
本文实例讲述了vue自定义指令实现方法。分享给大家供大家参考,具体如下:
vue中的指令就是v-on v-bind v-show等等,那么自定义指令是什么呢?
自己定义的指令就是自定义指令。
语法:
Vue.directive(id, definition)
这里可以参考vue中的指令
Yes
其中,if就是指令ID,yes是expressionVue.directive()传入接受两个参数,id是指指令ID,definition是指定义对象。其中,定义对象可以提供一些钩子函数。
钩子函数:
- bind
- inserted:被绑定元素插入父节点时调用 (仅保证父节点存在,但不一定已被插入文档中)。
- update
- componentUpdated
unbind
钩子函数参数
- el:指令所绑定的元素,可以用来直接操作 DOM 。
- binding:一个对象,包含以下属性:
比如 name, value ,expression ,rawName等等
为了更好的操作DOM
例子如下,让p标签的颜色变成红色。给p标签加入了v-color 的自定义指令。
Document 我是自定义指令
red绑定到data里面的变量我是自定义指令
也支持字符串
新闻标题:vue自定义指令实现方法详解-创新互联
网站URL:http://tyjierui.cn/article/dghpio.html