vue自定义指令

最新推荐文章于 2025-06-07 02:58:11 发布

TechWhiz-晓同

最新推荐文章于 2025-06-07 02:58:11 发布

阅读量393

点赞数 9

分类专栏： vue 文章标签： vue.js javascript 前端

本文链接：https://blog.youkuaiyun.com/m0_72603435/article/details/136281381

版权

vue 专栏收录该内容

20 篇文章

订阅专栏

本文介绍了如何在HTML中使用带有小写`v-lxt`属性的ElButton，并在Vue.js组件中实现自定义事件监听和生命周期钩子函数，如created(),beforeMount(),mounted()等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

HTML:

注意：在元素上使用的时候要小写

<el-button type="primary" v-lxt="asd" round>主要按钮</el-button>

JS:

注意：js要小写v+首字母大写，自定义事件里面一定要有生命周期哦

const vLxt = {
  created(el, binding, vnode, prevVnode) {
    el.addEventListener('click', function () {
      console.log(2143353);
    })
    console.log(el, 1);
    console.log(binding, 2);
    console.log(vnode, 3);
    console.log(prevVnode, 4);
  },
  // 在元素被插入到 DOM 前调用
  beforeMount() { },
  // 在绑定元素的父组件
  // 及他自己的所有子节点都挂载完成后调用
  mounted() { },
  // 绑定元素的父组件更新前调用
  beforeUpdate() { },
  // 在绑定元素的父组件
  // 及他自己的所有子节点都更新后调用
  updated() { },
  // 绑定元素的父组件卸载前调用
  beforeUnmount() { },
  // 绑定元素的父组件卸载后调用
  unmounted() { },
}