首页 > 其他 > 详细

vue自定义指令

时间:2021-03-06 00:21:53      阅读:48      评论:0      收藏:0      [点我收藏+]

Vue中所有的指令在调用的时候,都以 v- 开头。

注册全局指令,参数1是指令的名称,在定义的时候,指令名称前不需要加 v-,调用的时候则需要加v-前缀。参数2是一个对象,这个对象上有指令相关的函数,这些函数会在特定

的阶段执行相关的操作。

// 注册一个全局自定义指令 `v-focus`
Vue.directive(‘focus‘, {
  // 当被绑定的元素插入到 DOM 中时……
  inserted: function (el) {
    // 聚焦元素
    el.focus()
  }
})

 

 

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

directives: {
  focus: {
    // 指令的定义
    inserted: function (el) {
      el.focus()
    }
  }
}

然后你可以在模板中任何元素上使用新的 v-focus property,如下:

<input v-focus>

技术分享图片

钩子函数第一个参数永远是el,表示被绑定的那个元素,是一个原生的js对象。

 

 

 bind和inserted只执行一次,updata

和js行为有关的操作,最好在inserted去执行,防止js行为不生效

 和样式有关的操作,一般都可以在bind中执行

技术分享图片

 

 

参考官方文档:https://cn.vuejs.org/v2/guide/custom-directive.html

vue自定义指令

原文:https://www.cnblogs.com/sundance123/p/14489182.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!