大橙子网站建设,新征程启航

为企业提供网站建设、域名注册、服务器等服务

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

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

目前成都创新互联已为上1000家的企业提供了网站建设、域名、网站空间网站运营、企业网站设计、盘山网站维护等服务,公司将坚持客户导向、应用为本的策略,正道将秉承"和谐、参与、激情"的文化,与客户和合作伙伴齐心协力一起成长,共同发展。

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 的自定义指令。




  
  Document


  

我是自定义指令

red绑定到data里面的变量

我是自定义指令

也支持字符串

局部注册例子




  
  Document


  

我是自定义指令

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

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

怎么办?




  
  Document
  


  
我是侧边栏

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


当前文章:vue自定义指令实现方法详解
转载源于:http://dzwzjz.com/article/jehgsj.html
在线咨询
服务热线
服务热线:028-86922220
TOP