事件绑定tips
1. 这里还有一些习题噢，如果大家想要的话，可以call我，下期给大家单独整理出来
2. vue网址：简介 | Vue.js (vuejs.org)
### 监听事件
- 使用 `v-on` 指令（简写为 `@`）来监听 DOM 事件，并在事件触发时执行对应的 js。
- 用法：`v-on:click="handler"` 或 `@click="handler"`。
### 在内联事件处理器中访问事件参数
- 访问原生 DOM 事件： `$event` 变量，或者使用内联箭头函数。
```js
template
<!-- 使用特殊的 $event 变量 -->
<button @click="warn('Form cannot be submitted yet.', $event)">
Submit
</button>
<!-- 使用内联箭头函数 -->
<button @click="(event) => warn('Form cannot be submitted yet.', event)">
Submit
</button>
function warn(message, event) {
// 这里可以访问原生事件
if (event) {
event.preventDefault()
}
alert(message)
}
```
### 事件修饰符
- 在处理事件时调用 `event.preventDefault()` 或 `event.stopPropagation()` 是很常见的。Vue 为 `v-on` 提供了事件修饰符。
- `.stop`
- `.prevent`
- `.self`
- `.capture`
- `.once`
- `.passive`
```js
<!-- 单击事件将停止传递 -->
<a @click.stop="doThis"></a>
<!-- 提交事件将不再重新加载页面 -->
<form @submit.prevent="onSubmit"></form>
<!-- 修饰语可以使用链式书写 -->
<a @click.stop.prevent="doThat"></a>
<!-- 也可以只有修饰符 -->
<form @submit.prevent></form>
<!-- 仅当 event.target 是元素本身时才会触发事件处理器 -->
<!-- 例如：事件处理器不来自子元素 -->
<div @click.self="doThat">...</div>
```
### 按键修饰符
- 在监听键盘事件时，我们经常需要检查特定的按键。Vue 允许在 `v-on` 或 `@` 监听按键事件时添加按键修饰符。
```js
<!-- 仅在 `key` 为 `Enter` 时调用 `submit` -->
<input @keyup.enter="submit" />
```
### 按键别名
- Vue 为一些常用的按键提供了别名：
- `.enter`
- `.tab`
- `.delete`（捕获“Delete”和“Backspace”两个按键）
- `.esc`
- `.space`
- `.up`
- `.down`
- `.left`
- `.right`
### 系统按键修饰符
- 你可以使用以下系统按键修饰符来触发鼠标或键盘事件监听器，只有当按键被按下时才会触发。
- `.ctrl`
- `.alt`
- `.shift`
- `.meta`
```js
<!-- Alt + Enter -->
<input @keyup.alt.enter="clear" />
<!-- Ctrl + 点击 -->
<div @click.ctrl="doSomething">Do something</div>
```
### .exact 修饰符
- `.exact` 修饰符允许精确控制触发事件所需的系统修饰符的组合。
```js
<!-- 当按下 Ctrl 时，即使同时按下 Alt 或 Shift 也会触发 -->
<button @click.ctrl="onClick">A</button>
<!-- 仅当按下 Ctrl 且未按任何其他键时才会触发 -->
<button @click.ctrl.exact="onCtrlClick">A</button>
<!-- 仅当没有按下任何系统按键时触发 -->
<button @click.exact="onClick">A</button>
```
### 鼠标按键修饰符
- `.left`
- `.right`
- `.middle`
## 表单输入绑定
### 基本用法
- 在前端处理表单时，我们常常需要将表单输入框的内容同步给 js 中相应的变量。`v-model` 指令帮我们简化了这一步骤。
```js
template
<input v-model="text">
```
### 文本
```js
<p>Message is: {{ message }}</p>
<input v-model="message" placeholder="edit me" />
```
### 多行文本
```js
<span>Multiline message is:</span>
<p style="white-space: pre-line;">{{ message }}</p>
<textarea v-model="message" placeholder="add multiple lines"></textarea>
```