自定义指令(全局Vue.directive)(局部directive)

自定义指令(全局Vue.directive)(局部directive),第1张

1、目标:获取标签,扩展额外的功能;

--两种语法--

全局注册

1、Vue.directive('指令名称',{inserted(){}})

Vue.directive('myfocus', {

//inserted:钩子函数,el:指绑定的元素

  inserted(el) {

   //打印出来看看有没有触发

    console.log('123');

     //元素聚焦
    el.focus()
  }
})

局部注册

  //局部指令 directives:{"指令名称":{inserted(){}}}
  directives: {
    myfocus: {
      //inserted:解析元素的时候触发钩子 el:指令所绑定的元素,可以直接 *** 作DOM
      inserted(el) {
        el.focus();
      },
    },
  },
};

2、指令传值

目标:自定义一个输入框文字的颜色指令





自定义的指令的值是binding的value值,相对应

 

 

 

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/web/1322070.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-06-12
下一篇 2022-06-12

发表评论

登录后才能评论

评论列表(0条)

保存