Vue3 事件处理

Vue3 事件处理

引言

Vue.js 是一款流行的前端 JavaScript 框架，用于构建用户界面和单页应用程序。Vue3 作为 Vue.js 的最新版本，在性能、易用性和功能上都有所提升。其中，事件处理是 Vue3 中非常重要的一环，它涉及到如何响应用户的操作，如点击、键盘输入等。

1. 事件绑定

在 Vue3 中，事件绑定是通过在模板中使用 v-on 指令（或简写为 @ 符号）来完成的。下面是一个简单的示例：

<template>
  <div>
    <button @click="handleClick">点击我</button>
  </div>
</template>
<script>
export default {
  methods: {
    handleClick() {
      console.log('按钮被点击了');
    }
  }
}
</script>

在上面的示例中，当用户点击按钮时，会触发 handleClick 方法，并输出一条信息到控制台。

1.1 事件监听器

除了在模板中直接绑定事件，我们还可以在组件的 setup 函数中添加事件监听器：

import { onMounted, onUnmounted } from 'vue';

export default {
  setup() {
    const handleClick = () => {
      console.log('按钮被点击了');
    };

    onMounted(() => {
      window.addEventListener('click', handleClick);
    });

    onUnmounted(() => {
      window.removeEventListener('click', handleClick);
    });

    return { handleClick };
  }
};
</script>

1.2 事件对象

在事件处理函数中，我们可以通过 event 参数访问事件对象。事件对象包含了事件的详细信息，如 target（触发事件的元素）、currentTarget（绑定事件的元素）等。

handleClick(event) {
  console.log('按钮被点击了');
  .(event.); 
  .(event.); 
}