好资源导航 » 文章资讯 » vue自定义指令实现方法详解

vue自定义指令实现方法详解

2023-08-29 05:04:04 56

本文实例讲述了vue自定义指令实现方法。分享给大家供大家参考，具体如下：

vue中的指令就是v-onv-bindv-show等等，那么自定义指令是什么呢？

自己定义的指令就是自定义指令。

语法：

Vue.directive(id,definition)

这里可以参考vue中的指令

Yes其中，if就是指令ID，yes是expression

Vue.directive()传入接受两个参数，id是指指令ID，definition是指定义对象。其中，定义对象可以提供一些钩子函数。

钩子函数：

-inserted：被绑定元素插入父节点时调用(仅保证父节点存在，但不一定已被插入文档中)。

钩子函数参数

比如name,value,expression，rawName等等

为了更好的操作DOM

例子如下，让p标签的颜色变成红色。给p标签加入了v-color的自定义指令。





Document



我是自定义指令red绑定到data里面的变量
我是自定义指令也支持字符串

局部注册例子





Document



我是自定义指令

比如给侧边栏做一个鼠标滚轮事件。

但是，这样需要兼容写法，粗暴的给元素添加onmousewheel是不对的，因为在火狐浏览器下根本不会执行。

怎么办？





Document




我是侧边栏

希望本文所述对大家vue.js程序设计有所帮助。