8.3.1 事件修饰符-Vue.js从入门到精通(二)

当前位置:　首页>> 技术小册>> Vue.js从入门到精通(二)

### 8.3.1 事件修饰符

在Vue.js中，事件处理是组件交互的核心部分。Vue提供了事件监听和事件处理的机制，让开发者能够轻松地为元素绑定事件并定义相应的处理函数。然而，在实际开发中，我们经常会遇到一些需要特殊处理的事件场景，比如阻止默认行为、阻止事件冒泡、只允许一次点击等。为了简化这些场景的处理，Vue引入了事件修饰符（Event Modifiers），它们是一种特殊的后缀，可以添加到`v-on`指令（或其缩写`@`）的事件名后，用于指示Vue执行某些特定的行为。

#### 8.3.1.1 阻止默认行为

在Web开发中，许多元素（如链接`<a>`、表单`<form>`提交按钮等）自带默认行为。例如，点击链接会跳转到新的URL，表单提交会向服务器发送数据。然而，在某些情况下，我们可能希望阻止这些默认行为，转而执行自定义的JavaScript逻辑。Vue提供了`.prevent`修饰符来实现这一点。

```html
<template>
  <div>
    
    <a href="https://example.com" @click.prevent="handleClick">点击我，但不会跳转</a>
  </div>
</template>

#### 8.3.1.2 阻止事件冒泡

事件冒泡是DOM事件处理中的一个重要概念，指的是事件从最内层的元素开始，然后向外层元素逐级传播的过程。在某些情况下，我们可能希望事件仅在当前元素上触发，不希望它冒泡到父元素上。Vue提供了`.stop`修饰符来阻止事件冒泡。

```html
<template>
  <div @click="parentClick">
    <button @click.stop="buttonClick">点击我，不会触发父元素的点击事件</button>
  </div>
</template>

#### 8.3.1.3 阻止默认行为并阻止事件冒泡

有时，我们既需要阻止元素的默认行为，又需要阻止事件冒泡。Vue允许我们将`.prevent`和`.stop`修饰符组合使用，以达到这一目的。

```html
<template>
  <form @submit.prevent.stop="handleSubmit">
    <button type="submit">提交表单，不会跳转且不会冒泡</button>
  </form>
</template>

#### 8.3.1.4 捕获模式

在DOM事件流中，除了冒泡模式，还有捕获模式。在捕获模式下，事件首先从最外层的元素开始，然后向里层元素逐级传播。Vue的事件监听默认是冒泡模式，但`.capture`修饰符可以让我们以捕获模式监听事件。

```html
<template>
  <div @click.capture="parentClick">
    <button @click="buttonClick">点击我，首先触发父元素的点击事件（捕获模式）</button>
  </div>
</template>

#### 8.3.1.5 只触发一次

有时，我们可能希望某个事件处理函数只被调用一次，无论事件被触发了多少次。Vue的`.once`修饰符就是为此设计的。

```html
<template>
  <button @click.once="handleClick">点击我，但只会被响应一次</button>
</template>

#### 8.3.1.6 按键修饰符

对于键盘事件（如`keydown`、`keyup`），Vue还提供了一系列按键修饰符，允许我们根据具体的按键来触发事件处理函数。这些修饰符包括`.enter`、`.tab`、`.delete`（捕获“Delete”和“Backspace”键）、`.esc`、`.space`、`.up`、`.down`、`.left`、`.right`等，以及用于组合键的`.ctrl`、`.alt`、`.shift`、`.meta`（在Mac上是`Command`键，在Windows上是`Windows`键）。

```html
<template>
  <div>
    
    <input @keyup.enter="submitForm" placeholder="按下Enter提交">
    
    
    <input @keyup.ctrl.enter="ctrlEnterPressed" placeholder="同时按下Ctrl+Enter">
  </div>
</template>

#### 8.3.1.7 系统修饰符

除了上述修饰符外，Vue还提供了`.exact`修饰符，它用于控制带有系统修饰符（如`.ctrl`、`.shift`、`.alt`、`.meta`）的键盘事件监听器。默认情况下，带有系统修饰符的监听器会触发于匹配到任何系统修饰键的情况下。但是，如果你只想在事件完全匹配指定的系统修饰键时才触发监听器，可以使用`.exact`修饰符。

```html
<template>
  <div>
    
    <input @keyup.ctrl.exact.c="ctrlCPressed" placeholder="同时按下Ctrl+C">
  </div>
</template>

事件修饰符是Vue提供的一种强大而简洁的语法糖，它们极大地简化了事件处理的复杂性，提高了开发效率。通过合理使用事件修饰符，我们可以更灵活地控制事件的行为，实现更加丰富的交互体验。

该分类下的相关小册推荐：

Vue面试指南

TypeScript和Vue从入门到精通(二)

Vue源码完全解析

TypeScript和Vue从入门到精通(一)

Vue原理与源码解析

TypeScript和Vue从入门到精通(四)

TypeScript和Vue从入门到精通(五)

VUE组件基础与实战

TypeScript和Vue从入门到精通(三)

vuejs组件实例与底层原理精讲

Vue.js从入门到精通(三)

Vue3技术解密