Vue3$SideEffect-Event
1. 基本使用
使用 v-on 指令（或者简写形式@），绑定事件处理器（handler）从而监听 DOM 事件。
事件处理器分为：
- 内联事件处理器 Inline handlers：用法类似于原生的
onclick - 方法事件处理器 Method handlers：函数
2. 参数 $event
在事件处理器中，默认的第一个参数是 DOM 原生事件，如果想要显式地获取（比如作为第二个参数），则需要使用 $event 。
<!-- using $event special variable -->
<button @click="warn('Form cannot be submitted yet.', $event)">
Submit
</button>
<!-- using inline arrow function -->
<button @click="(event) => warn('Form cannot be submitted yet.', event)">
Submit
</button>
3. 事件修饰符 Event Modifiers
事件修饰符是用来修饰事件处理器的，这样就不用在函数逻辑里写 event.preventDefault() 了。
需要注意：
- 顺序不同效果可能不同
.passive和.prevent不应该同时使用，同时使用会以passive为准，且控制台有提示。
Vue 提供的事件修饰符有：
.stop.prevent.self.capture.once.passive
<form @submit.prevent="onSubmit"></form>
4. 按键和鼠标事件修饰符 Key Modifiers and Mouse Button Modifiers
按键修饰符表示按的是什么键，Vue 内置了一些简写方式，其他按键使用 kebab-case 来表示。对于系统按键，需要配合 keydown 来使用。如果想明确表示按什么键，可以加上 exact 修饰符。
鼠标修饰符表示按的是什么键。
- Key Modifiers: @keyup.enter, @keyup.page-down
1. Key Aliases: .enter, .tab, .delete, .esc, .space, .up, .down, .left, .right
2. System Modifier Keys (keydown): .ctrl, .alt, .shift, .meta
3. .exact
- Mouse Button Modifiers: .left, .right, .middle
