v-on 速记 - Javascript

在 Vue.js 中，v-on 是一个指令，用于绑定事件处理函数。通过 v-on，我们可以监听 DOM 事件，自定义事件，以及 Vue 实例上的自定义事件。

基本用法

最基本的用法是将 v-on 指令绑定在一个元素上，并指定要监听的事件类型和对应的处理函数。

<button v-on:click="handleClick">点击</button>

在上面的代码中，我们将 v-on:click 绑定在一个按钮元素上，并将其值设为 handleClick，这意味着当用户点击按钮时，handleClick 函数会被调用。

接下来，我们需要在 Vue 实例中定义这个函数：

new Vue({
  methods: {
    handleClick() {
      console.log('按钮被点击了！')
    }
  }
})

现在，当用户点击按钮时，控制台就会输出“按钮被点击了！”。

事件修饰符

有时候，我们需要对监听的事件进行一些细微的调整，比如：

• 阻止默认行为
• 阻止事件冒泡
• 只在按键上触发事件
• 等等

为了满足这些需求，Vue.js 提供了一些事件修饰符，它们可以在 v-on 指令的后面使用，例如：

<form v-on:submit.prevent="handleSubmit">
  <!-- ... -->
</form>

在上面的代码中，我们使用了一个名为 prevent 的事件修饰符，它会调用 event.preventDefault() 方法，从而阻止表单的默认提交行为。

常用的事件修饰符有：

• .stop：调用 event.stopPropagation() 方法阻止事件冒泡。
• .prevent：调用 event.preventDefault() 方法阻止事件的默认行为。
• .capture：使用事件捕获模式 instead of bubbling。
• .self：只有事件是在绑定事件的元素本身触发的时候才触发实例中定义的方法。
• .once：只调用一次监听器函数，之后自动移除。

按键修饰符

有时候，我们需要监听键盘按键事件。Vue.js 提供了一些指令来满足这个需求：

<input v-on:keyup.enter="submit">

在上面的代码中，我们监听了 Enter 键的按键事件，并在键盘弹起时，调用了 submit 方法。

常见的按键修饰符有：

• .enter
• .tab
• .delete (捕获“删除”和“退格”键)
• .esc
• .space
• .up
• .down
• .left
• .right

此外，您还可以使用别名键修饰符，例如 .ctrl、.alt、.shift、.meta 等。

自定义事件

在 Vue.js 中，您可以触发和监听自定义事件：

<my-component v-on:custom-event="handleEvent"></my-component>

在上面的代码中，我们监听了一个名为 custom-event 的自定义事件，并设置当该事件被触发时，调用名为 handleEvent 的方法。

要触发该事件，您需要在包含的子组件或父组件中发出事件：

this.$emit('custom-event')

在上面的代码中，我们使用 $emit 方法来触发 custom-event 事件，从而触发 handleEvent 方法。

详细文档

上面介绍的只是 v-on 的基本知识。如果您想了解更多关于 v-on 的详细信息，您可以查看 官方文档。