前言

Vue.js 是一个流行的 JavaScript 框架，用于构建用户界面。

它提供了一系列的事件来处理用户交互和组件之间的通信。

以下是 Vue.js 中常见的事件：

@click：当元素被点击时触发。
@dblclick：当元素被双击时触发。
@input：在文本输入框中，当用户输入内容时触发。
@change：在表单元素的值发生改变时触发。
@keydown：当用户按下键盘的某个键时触发。
@keyup：当用户释放键盘上的某个键时触发。
@submit：当表单被提交时触发。
@focus：当元素获得焦点时触发。
@blur：当元素失去焦点时触发。
@mouseover：当鼠标指针移到元素上时触发。
@mouseout：当鼠标指针从元素上移开时触发。
@scroll：当元素滚动时触发。

事件修饰符

在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。尽管我们可以在方法中轻松实现这点，但更好的方式是：方法只有纯粹的数据逻辑，而不是去处理 DOM 事件细节。

为了解决这个问题，Vue.js 为 v-on 提供了事件修饰符。

修饰符是由点开头的指令后缀来表示的。

.stop
.prevent
.capture
.self
.once
.passive

示例

<!-- 阻止单击事件继续传播 -->
<a v-on:click.stop="doThis"></a>

<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>

<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a>

<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>

<!-- 添加事件监听器时使用事件捕获模式 -->
<!-- 即内部元素触发的事件先在此处理，然后才交由内部元素进行处理 -->
<div v-on:click.capture="doThis">...</div>

<!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
<!-- 即事件不是从内部元素触发的 -->
<div v-on:click.self="doThat">...</div>

Enter事件

在 Vue.js 中，`@keyup.enter` 是一个常用的事件监听方式，用于监听用户在文本输入框中按下回车键（Enter 键）的操作。

当用户在输入框中按下回车键时，`@keyup.enter` 事件会被触发，可以通过这个事件来捕获用户的回车操作并执行相应的逻辑处理。

<template>
  <input type="text" v-model="inputValue" @keyup.enter="handleEnter">
</template>

<script>
export default {
  data() {
    return {
      inputValue: ''
    };
  },
  methods: {
    handleEnter() {
      // 在这里处理回车键被按下时的操作
      console.log('Enter key pressed');
    }
  }
};
</script>

使用 `@keyup.enter监听用户在输入框中按下回车键的操作，并在handleEnter` 方法中处理相关逻辑。

当用户在输入框中按下回车键时，控制台会输出 “Enter key pressed”。

我是码客，我是全栈工程师，我为自己代言。

Vue基础 - 事件

前言

事件修饰符

Enter事件