1. 事件修饰符
<!-- 阻止事件继续传播（冒泡） -->
<button @click.stop="do"></button>
<!-- 阻止事件默认行为 -->
<a href="https://baidu.com" @click.prevent="do"></a>
<!-- 允许事件只触发一次 -->
<button @click.once="do"></button>
<!-- 使用事件的捕获模式(由外往内触发事件） -->
/* 情景：想要在dv2中触发事件，不以冒泡方式触发 */
<div class="dv1" @click.capture="do(1)">
<div class="dv2" @click="do(2)"></div>
</div>
/* 未加修饰符，点击dv2，事件执行顺序(默认冒泡行为)为: do(2) -> do(1)
* 加了.capture修饰符，点击dv2，事件执行顺序(使用捕获模式)为：do(1) ->do(2)
*/
<!-- 只有在 event.target 是当前操作元素自身时才会触发事件，即事件不是从内部元素触发的-->
<div class="dv1" @click.self="do(1)">
<button class="dv2" @click="do(2)"></button>
</div>
<!-- 事件的默认行为立即执行，无需等待事件回调执行完毕 -->
/* 例如滚动条滚动事件 */
<div @scroll.passive="doScroll">....</div>
/* 例如鼠标滚动事件 */
<div @wheel.passive="doScroll">....</div>
2.键盘事件修饰符
- 键盘事件
- @keydown： 按下触发
- @keyup: 抬起触发
- 常用修饰符
<!-- 回车触发 -->
<button @keyup.enter="do"></button>
<!-- 删除触发 -->
<button @keyup.delete="do"></button>
<!-- 退出触发 -->
<button @keyup.esc="do"></button>
<!-- 空格触发 -->
<button @keyup.space="do"></button>
<!-- 换行触发 --> /* 注意：看下方解释* /
<button @keydown.tab="do"></button>
<!-- 方向键触发触发 -->
<button @keyup.up="do"></button>
<button @keyup.down="do"></button>
<button @keyup.left="do"></button>
<button @keyup.right="do"></button>
/* 如果需要其他按键，可带上按键编码即可触发 */
<button @keyup.13="do"></button>
- 系统修饰符
ctrl、alt、shift、meta用法较特殊：
(1) 配合keyup使用：按下按键的同时,再按下其他键，随后释放其他键，事件才会被触发。
(2) 配合keydown使用：正常触发事件。
- 自定义键名
Vue.config.keyCode.自定义键名 = 按键码
注意：Tab按键本身自带功能：把焦点从当前元素切走。当按下Tab键时不用等按键抬起，当前焦点就被切走了，所以在keyup事件追加tab修饰符是没有用的，所以需要配合keydown事件。
3. v-model修饰符
- lazy 修饰符
在默认情况下，v-model 在每次 input 事件触发后将输入框的值与数据进行同步,你可以添加 lazy 修饰符，从而转为在 change 事件之后进行同步,即等用户输入完毕后(回车之后，或失去焦点时）进行同步。
<input type='text' v-model.lazy="message" />
- number 修饰符
如果想自动将用户的输入值转为数值类型，可以给
v-model添加number修饰符：
<input v-model.number="age" type="number">
这通常很有用，因为即使在 type="number" 时，HTML 输入元素的值也总会返回字符串。如果这个值无法被 parseFloat() 解析，则会返回原始的值。
- trim 修饰符
如果要自动过滤用户输入的首尾空白字符，可以给
v-model添加trim修饰符：
<input v-model.trim="msg">
