Vue.js 中的 v-on 指令

Vue.js 是一种流行的 JavaScript 框架，被广泛应用于构建用户界面。 v-on 指令是 Vue.js 提供的一种指令，用于添加事件监听器。本文将重点介绍 v-on 指令在 HTML 元素上的应用。

基本语法

<template>
  <button v-on:click="handler">Click me!</button>
</template>

v-on 指令可以直接绑定到一个事件名称上，如 v-on:click。它需要一个表达式（在本例中是 handler），该表达式将在触发事件时执行。

常见事件

v-on 指令可以绑定到任何 DOM 事件，包括鼠标事件、键盘事件、表单事件、窗口事件等等。以下是一些常见的事件名称：

• click
• dblclick
• hover
• focus
• blur
• keydown
• keyup
• submit
• resize

其中， hover 事件并不是原生 DOM 事件，它实际上是 mouseenter 和 mouseleave 事件的组合。在 Vue.js 中，我们可以使用 v-on:mouseenter 和 v-on:mouseleave 分别监听这两个事件。

<template>
  <div v-on:mouseenter="onMouseEnter" v-on:mouseleave="onMouseLeave">
    <p>Hover over me</p>
  </div>
</template>

事件修饰符

Vue.js 为 v-on 指令提供了一些事件修饰符，以方便开发人员处理事件逻辑。以下是一些常见的事件修饰符：

• .stop：停止事件冒泡
• .prevent：阻止默认行为
• .capture：使用事件捕获模式
• .self：只当事件在该元素本身（而不是子元素）触发时触发回调
• .once：只触发一次回调
• .passive：提高移动端性能（告诉浏览器不要阻止事件默认行为）

<template>
  <form v-on:submit.prevent="onSubmit">
    <input type="text" v-model="message">
    <button type="submit">Submit</button>
  </form>
</template>

在上面的例子中，我们使用 .prevent 修饰符阻止表单的默认提交行为。

动态事件名称

我们可以在 v-on 指令中使用表达式动态计算事件名称。

<template>
  <div v-for="(event, index) in events" v-bind:key="index" v-on:[event]="handler">{{ event }}</div>
</template>

在上面的例子中，事件名称列表存储在 events 数组中，我们通过 v-bind 绑定到 div 元素的 v-on 属性上，使用方括号语法来动态计算事件名称。当事件触发时，将调用 handler 方法。

总结

v-on 指令是 Vue.js 中的一个重要指令，用于添加事件监听器。它可以绑定到任何 DOM 事件上，并提供了丰富的事件修饰符和动态事件名称功能。深入理解 v-on 指令的使用将有助于我们更好地构建高效的 Vue.js 应用程序。

示例代码

<template>
  <div v-on:mouseenter="onMouseEnter" v-on:mouseleave="onMouseLeave">
    <p>Hover over me</p>
  </div>
</template>

<script>
export default {
  methods: {
    onMouseEnter() {
      console.log('Mouse entered')
    },
    onMouseLeave() {
      console.log('Mouse left')
    }
  }
}
</script>