监听事件

在 Vue3 中，我们可以使用v-on指令或者简写为@来监听 DOM 事件，例如点击事件、键盘事件等。

常用事件

@click 监听点击事件
@keydown 监听键盘按下事件
@change 监听表单元素的值变化事件
@input 监听表单元素的输入事件
@focus 监听表单元素的获得焦点事件
@blur 监听表单元素的失去焦点事件
@scroll 监听元素的滚动事件

以下是一个简单的例子：

html

<template>
  <div>
    <button @click="handleClick">点击我</button>
    <input @keydown="handleKeyDown" />
    <button @mousedown="handleMouseDown">按下我</button>
  </div>
</template>

<script>
  export default {
    methods: {
      handleClick() {
        console.log("按钮被点击了");
      },
      handleKeyDown(event) {
        console.log("按键被按下了", event);
      },
      handleMouseDown() {
        console.log("鼠标被按下了");
      },
    },
  };
</script>

在这个例子中，我们监听了三个不同的事件：点击按钮、在输入框中按下键盘、按下鼠标。当这些事件发生时，我们会调用相应的方法。

事件用法

click 绑定一个方法

@click 可以直接绑定一个方法到元素的点击事件上。例如：

vue

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

<script setup>
const handleClick = () => {
  console.log("按钮被点击了！");
};
</script>

在上述示例中，当按钮被点击时，会执行 handleClick 方法，并在控制台打印一条消息。

click 接收一个内联表达式

除了直接绑定方法，@click 还可以接收一个内联表达式或动态方法名。例如：

vue

<template>
  <button @click="count++">增加计数器</button>

  <button @click="dynamicMethod">调用动态方法</button>
</template>

<script setup>
let count = ref(0);

const dynamicMethod = () => {
  console.log("动态方法被调用了！");
};
</script>

在上面的示例中，第一个按钮会使计数器增加，而第二个按钮会调用 dynamicMethod 方法。

注意事项：当使用内联表达式时，确保表达式的结果是一个函数。否则，Vue 3 将会发出警告。

事件修饰符

Vue 3 提供了一些事件修饰符来改变事件的行为。以下是常用的事件修饰符：

.stop：阻止事件冒泡。
.prevent：阻止默认行为。
.self：只有事件在该元素本身触发时才会调用处理函数，不会反弹到父元素。
.capture：使用事件捕获模式而不是冒泡模式处理事件。
.once：只触发一次事件处理函数。
.passive：表明事件处理函数不会调用 preventDefault()。

这些修饰符可以结合使用，例如：

vue

<template>
  <div @click.stop.prevent="handleClick">阻止冒泡和默认行为</div>
</template>

<script setup>
const handleClick = () => {
  console.log("事件被触发了！");
};
</script>

在上面的示例中，点击 <div> 元素会阻止事件冒泡并阻止默认行为。

按键修饰符

Vue 3 还提供了按键修饰符，用于处理特定按键的事件。你可以使用硬编码的按键码或使用别名来表示按键。

硬编码的按键码示例：

vue

<template>
  <input @keydown.13="handleEnterKey" placeholder="按下 Enter 键" />
</template>

<script setup>
const handleEnterKey = () => {
  console.log("按下 Enter 键！");
};
</script>

在上面的示例中，当用户按下 Enter 键时，会触发 handleEnterKey 方法。

别名的按键修饰符示例：

vue

<template>
  <input @keydown.enter="handleEnterKey" placeholder="按下 Enter 键" />
</template>

<script setup>
const handleEnterKey = () => {
  console.log("按下 Enter 键！");
};
</script>

这里使用 @keydown.enter 来表示按下 Enter 键。

除了 Enter 键，Vue 3 还提供了一些常用按键的别名，例如：.tab, .delete, .esc, .space, .up, .down, .left, .right。

系统按键修饰符

如果你想处理系统按键（如 Ctrl、Alt、Shift、Meta），Vue 3 也提供了相应的修饰符。例如：

vue

<template>
  <input @keydown.ctrl="handleCtrlKey" placeholder="按下 Ctrl 键" />
</template>

<script setup>
const handleCtrlKey = () => {
  console.log("按下 Ctrl 键！");
};
</script>

在上面的示例中，当用户按下 Ctrl 键时，会触发 handleCtrlKey 方法。

`.exact` 修饰符

使用 .exact 修饰符可以确保组合按键的精确匹配。例如，如果你想要按下 Ctrl + Alt + A 才触发事件，可以这样写：

vue

<template>
  <input
    @keydown.ctrl.alt.exact="handleExactKey"
    placeholder="按下 Ctrl + Alt + A"
  />
</template>

<script setup>
const handleExactKey = () => {
  console.log("按下 Ctrl + Alt + A！");
};
</script>

这样只有在按下 Ctrl + Alt + A 的组合键时，才会触发 handleExactKey 方法。

鼠标按键修饰符

除了处理键盘事件，Vue 3 还提供了鼠标按键修饰符。以下是常用的鼠标按键修饰符：

.left：左键
.right：右键
.middle：中键

例如：

vue

<template>
  <div @mousedown.left="handleLeftClick">点击左键</div>
</template>

<script setup>
const handleLeftClick = () => {
  console.log("点击左键！");
};
</script>

在上面的示例中，当用户点击 <div> 元素的左键时，会触发 handleLeftClick 方法。

以上就是关于 Vue 3 事件处理的详细解释和示例代码。通过这些示例，你可以更好地理解 Vue 3 中的事件处理机制，并注意相应的用法和注意事项。

监听事件 ​

常用事件 ​

事件用法 ​

click 绑定一个方法 ​

click 接收一个内联表达式 ​

事件修饰符 ​

按键修饰符 ​

系统按键修饰符 ​

.exact 修饰符 ​

鼠标按键修饰符 ​