vue3 setup 怎麼使用addEventListener

在 Vue 3 中，可以使用 on 指令来为元素添加事件监听器。

首先，确保你已经安装了 Vue 3。然后，在你的 Vue 组件中，使用 v-on 或 @ 符号来添加事件监听器。例如，如果你想为按钮添加 click 事件监听器，可以这样做：

<template>
  <button @click="handleClick">点击我</button>
</template>

<script>
export default {
  methods: {
    handleClick() {
      // 处理点击事件的代码
    }
  }
}
</script>

在这个例子中，@click 表示添加 click 事件监听器，并将 handleClick 方法作为事件处理函数。当按钮被点击时，handleClick 方法会被调用。

如果你想直接在 JavaScript 中使用 addEventListener，可以通过 ref 来获取元素，并在 mounted 钩子函数中添加事件监听器。例如：

<template>
  <button ref="myButton">点击我</button>
</template>

<script>
import { ref, onMounted } from 'vue'

export default {
  setup() {
    const myButton = ref(null)

    onMounted(() => {
      myButton.value.addEventListener('click', handleClick)
    })

    const handleClick = () => {
      // 处理点击事件的代码
    }

    return {
      myButton
    }
  }
}
</script>

在这个例子中，我们使用 ref 创建了一个名为 myButton 的引用。在 onMounted 钩子函数中，我们通过 addEventListener 方法为按钮添加了 click 事件监听器，并将 handleClick 方法作为事件处理函数。

注意，在 Vue 3 中，使用 setup 函数来替代以前的选项式 API，这样可以更好地支持 Composition API。