Vue-------自定义指令

最新推荐文章于 2024-11-03 19:51:25 发布

Z_BL

最新推荐文章于 2024-11-03 19:51:25 发布

阅读量326

点赞数 3

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/Z_B_L/article/details/137191868

版权

本文介绍了如何在Vue组件中使用HTML的el-button元素，并结合自定义事件和Vue的生命周期方法，如created、mounted等，以实现特定功能并监控组件状态变化。

摘要由CSDN通过智能技术生成

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() { },
}

ヾ(￣▽￣)Bye~Bye~