Vue 事件处理 v-on
用 v-on（简写 @）处理点击、键盘、表单等用户交互事件 · 难度：入门 · +20XP
v-on — 监听用户操作
v-on 用来响应用户的操作：点击按钮、输入文字、按下键盘、移动鼠标等等。
完整写法是 v-on:事件名，简写是 @事件名。工作中几乎都用简写。
点击事件
<button v-on:click="count = count + 1">+1</button>
<button @click="count = count + 1">+1（简写）</button>
<button @click="sayHello">调用方法</button>事件修饰符
修饰符加在事件名的后面，用点连接。可以链式使用：
| 修饰符 | 作用 | 什么时候用 |
|---|---|---|
.prevent | 阻止默认行为 | 表单提交不刷新页面 |
.stop | 阻止事件冒泡 | 不触发父元素的事件 |
.once | 只触发一次 | 按钮只能点一次 |
<form @submit.prevent="onSubmit"> <!-- 阻止表单自动提交 -->
<button @click.once="pay">支付</button> <!-- 只能点一次 -->
<div @click.stop>不冒泡</div>按键修饰符
<input @keyup.enter="search"> <!-- 按回车搜索 -->
<input @keyup.esc="close"> <!-- 按 ESC 关闭 -->
<textarea @keyup.ctrl.enter="send"></textarea> <!-- Ctrl+回车 -->动手试试
- 右边是一个留言板，输入文字按回车发送
- 点 × 删除留言
- 试试修改代码，加一个"清空所有"按钮