vue自定义指令实现方法详解-创新互联

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

成都创新互联公司，专注为中小企业提供官网建设、营销型网站制作、响应式网站开发、展示型成都网站设计、做网站、成都外贸网站建设公司等服务，帮助中小企业通过网站体现价值、有效益。帮助企业快速建站、解决网站建设与网站营销推广问题。

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

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

语法：

Vue.directive(id, definition)

这里可以参考vue中的指令

Yes

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

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

钩子函数：

• bind

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

• update
• componentUpdated

  unbind

钩子函数参数

• el：指令所绑定的元素，可以用来直接操作 DOM 。
• binding：一个对象，包含以下属性：

比如 name, value ,expression ，rawName等等

为了更好的操作DOM

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

  
  


  

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

文章名称：vue自定义指令实现方法详解-创新互联
转载来源：http://bzwzjz.com/article/dghpio.html