在Vue中，修饰符处理了许多DOM事件的细节，让我们不再需要花费大量的时间去处理这些烦恼的细节上逻辑，这样我们就可以专心的处理业务逻辑了。
Vue中的修饰符有以下六种：
1.v-bind修饰符
2.事件修饰符
3.表单修饰符
4.按键修饰符
5.系统修饰符
6.鼠标按钮修饰符
我们来看下具体修饰符的使用
v-bind修饰符
.prop - 作为一个 DOM property 绑定而不是作为 attribute 绑定，如何理解DOM property 和attribute？解释说明
.camel - 修饰符允许在使用 DOM 模板时将 v-bind property 名称驼峰化，在使用字符串模板或通过 vue-loader/vueify 编译时，无需使用 .camel。
.sync- 组件的用法，是一个语法糖，会扩展成一个更新父组件绑定值的 v-on 侦听器。
<!-- class 绑定 -->
<div :class="[classA, classB]"></div>
<!-- 绑定一个 attribute -->
<img v-bind:src="imageSrc">
<!-- 通过 prop 修饰符绑定 DOM attribute -->
<div v-bind:text-content.prop="text"></div>
<!-- 通过 $props 将父组件的 props 一起传给子组件 -->
<child-component v-bind="$props"></child-component>
<!-- prop 绑定。“prop”必须在 my-component 中声明。-->
<my-component :prop="someThing"></my-component>
事件修饰符
.stop 阻止点击事件冒泡,等同于JavaScript中的event.stopPropagation();
.prevent 阻止事件的默认行为,prevent等同于JavaScript的event.preventDefault()，取消默认事件。
.self 点击事件绑定的元素本身才会触发事件，不会触发子元素和父元素绑定的事件。
.once 只会触发一次事件，再次点击不会触发。
.capture 添加事件监听器时使用事件捕获模式,即内部元素触发的事件先在此处理,然后才交由内部元素进行处理。
<button @click.stop="btnHandle()">按钮</button>
<button @click.prevent="btnHandle()">按钮</button>
<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a>
注意：使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生。因此，用 v-on:click.prevent.self 会阻止所有的点击，而 v-on:click.self.prevent 只会阻止对元素自身的点击。
表单修饰符
表单修饰符有以下几种：
.lazy 在“change”时而非“input”时触发处理函数。
.number 将用户的输入值转为数值类型，如果输入的首字母不是数字，则不会转换。
.trim 自动过滤用户输入的首尾空白字符
<!-- 在“change”时而非“input”时更新 -->
<input v-model.lazy="msg">
<!-- 将用户的输入值转为数值类型 -->
<input v-model.number="age" type="number">
<!-- 自动过滤用户输入的首尾空白字符 -->
<input v-model.trim="msg">
按键修饰符
在监听键盘事件时，我们经常需要检查详细的按键。Vue 允许为 v-on 在监听键盘事件时添加按键修饰符： 任意有效按键名转换为 kebab-case后都可以作为有效修饰符。
按键名称：Enter,Tab,ArrowDown,ArrowLeft,End,Clear等等
<!-- 只有在 key 是 Enter 时调用 vm.submit() -->
<input v-on:keyup.enter="submit">
<!-- key是page-down时调用 -->
<input v-on:keyup.page-down="onPageDown">
使用 keyCode attribute 也是允许的，但是keyCode 的事件用法已经被废弃了并可能不会被最新的浏览器支持。为了在必要的情况下支持旧浏览器，Vue 提供了绝大多数常用的按键码的别名：.enter,.tab,.delete (捕获“删除”和“退格”键),.esc,.space,.up,.down,.left,.right。
<!-- 按键编码 -->
<input v-on:keyup.13="submit">
你还可以通过全局 config.keyCodes 对象自定义按键修饰符别名：
<!-- 可以使用 v-on:keyup.f1 -->
Vue.config.keyCodes.f1 = 112
系统修饰键
可以用下面修饰符来实现仅在按下相应按键时才触发鼠标或键盘事件的监听器。
.ctrl
.alt
.shift
.meta
<!-- Alt + C -->
<input v-on:keyup.alt.67="clear">
<!-- Ctrl + Click -->
<div v-on:click.ctrl="doSomething">Do something</div>
.exact 修饰符： 允许你控制由精确的系统修饰符组合触发的事件。
<!-- 即使 Alt 或 Shift 被一同按下时也会触发 -->
<button v-on:click.ctrl="onClick">A</button>
<!-- 有且只有 Ctrl 被按下的时候才触发 -->
<button v-on:click.ctrl.exact="onCtrlClick">A</button>
<!-- 没有任何系统修饰符被按下的时候才触发 -->
<button v-on:click.exact="onClick">A</button>
鼠标按钮修饰符
.left，.right，.middle这些修饰符会限制处理函数仅响应特定的鼠标按钮。
本篇文章对你有帮助的话：麻烦点个赞吧！！！
