> For the complete documentation index, see [llms.txt](https://gb.akanote.cn/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://gb.akanote.cn/vue/day05.md).

# Part5-《TodoList》项目实战

## 一、修饰符

修饰符分两种，一种是事件修饰符，一种是按键修饰符。

### 1、事件修饰符

* `.stop` 阻止事件冒泡
* `.prevent` 阻止默认事件
* `.prevent.stop` 阻止默认事件的同时阻止冒泡
* `.once` 阻止事件重复触发（once与stop不能一起使用，否则再次触发事件，依然会冒泡）

### 2、按键修饰符

在监听键盘事件时，我们经常需要检查详细的按键。Vue 允许为 `v-on` 在监听键盘事件时添加按键修饰符：

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

为了在必要的情况下支持旧浏览器，Vue 提供了绝大多数常用的按键码的别名：

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

### 3、系统修饰键

可以用如下修饰符来实现仅在按下相应按键时才触发鼠标或键盘事件的监听器。

* `.ctrl`
* `.alt`
* `.shift`
* `.meta`

```
<!-- Alt + C -->
<input v-on:keyup.alt.67="clear">

<!-- Ctrl + Click -->
<div v-on:click.ctrl="doSomething">Do something</div>
```

#### 注意：

[![image-20200716202014266](https://i.loli.net/2021/03/19/XdJKbZgDSLh3uWz.png)](https://i.loli.net/2021/03/19/XdJKbZgDSLh3uWz.png)