1. 简介
修饰符是以半角句号 . 指明的特殊后缀
2. 常用修饰符
2.1 .prevent ：阻止事件默认行为
可以告诉v-on指令对于触发的事件调用 event.preventDefault()，一般用于表单提交、a标签的click事件等
<form v-on.prevent="onSubmit"></form>
<a href="www.baidu.com" @click.prevent="clickEvent">百度一下</a>
2.2 a标签常用修饰符
<a @click.stop="doThis"></a>
@click.stop：阻止单击事件冒泡
@click.prevent： 提交事件不再重载页面
@click.capture：添加事件着呢侦听器时使用事件捕捉模式
@click.self：只当事件在该元素本身（不作用于子元素）触发时触发回调
@click.once：click事件只能点击一次
@submit.prevent 提交事件不再重载页面（一般用于表单）
2.3 事件修饰符
Vue.js 通过由点 . 表示的指令后缀来调用修饰符
.stop - 阻止单击事件冒泡
.prevent - 阻止默认事件，提交事件不再重载页面
.capture - 阻止捕获，添加事件侦听器时，使用事件捕获模式
.self - 只监听触发该元素的事件
.once - 只触发一次
.left - 左键事件
.right - 右键事件
.middle - 中间滚轮事件
<!-- 阻止单击事件冒泡 -->
<a v-on:click.stop="doThis"></a>
<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>
<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a>
<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>
<!-- 添加事件侦听器时使用事件捕获模式 -->
<div v-on:click.capture="doThis">...</div>
<!-- 只当事件在该元素本身（而不是子元素）触发时触发回调 -->
<div v-on:click.self="doThat">...</div>
<!-- click 事件只能点击一次，2.1.4版本新增 -->
<a v-on:click.once="doThis"></a>
2.4 按键修饰符：监听键盘事件
<input v-on:keyup.enter='submit'>
简写为：
<input @keyup.enter='submit'>
按键别名
.enter
.tab
.delete (捕获 "删除" 和 "退格" 键)
.esc
.space
.up
.down
.left
.right
.ctrl
.alt
.shift
.meta
2.5 表单修饰符
2.5.1 .lazy
默认情况下， v-model 会在 input 事件中同步输入框的值与数据；如果加一个修饰符 lazy ，就会转变为在 change 事件中同步
<!-- 在 "change" 而不是 "input" 事件中更新 -->
<input v-model.lazy="msg" >
2.5.2 .number
自动将用户的输入值转为 Number 类型
<input v-model.number="age" type="number">
2.5.3 .trim
如果要自动过滤用户输入的首尾空格
<input v-model.trim="msg">