vue addeventlistener

// 在 Vue 组件中使用 addEventListener 的示例

<template>
  <div ref="myDiv">点击我</div>
</template>

<script>
export default {
  mounted() {
    // 使用 addEventListener 监听点击事件
    this.$refs.myDiv.addEventListener('click', this.handleClick);
  },
  methods: {
    handleClick(event) {
      console.log('元素被点击了', event);
    }
  },
  beforeDestroy() {
    // 移除事件监听器，防止内存泄漏
    this.$refs.myDiv.removeEventListener('click', this.handleClick);
  }
};
</script>

<style scoped>
div {
  padding: 10px;
  background-color: lightblue;
  cursor: pointer;
}
</style>

解释说明：

1. 模板部分 (<template>):

   • 使用了一个 div 元素，并通过 ref="myDiv" 给它一个引用，以便在 JavaScript 中可以通过 this.$refs.myDiv 获取该元素。

2. 脚本部分 (<script>):

   • 在 mounted 生命周期钩子中，使用 addEventListener 方法为 myDiv 添加了一个点击事件监听器。
   • 定义了 handleClick 方法来处理点击事件，当点击发生时，会在控制台输出一条消息。
   • 在 beforeDestroy 生命周期钩子中，使用 removeEventListener 方法移除事件监听器，以避免内存泄漏。

3. 样式部分 (<style scoped>):

   • 给 div 元素添加了一些简单的样式，使其更易于点击和识别。