vue修饰符：
《1》表单修饰符
《2》事件修饰符
《3》鼠标、按钮修饰符
《4》v-bind修饰符
《5》注意：修饰符可以同时使用多个,但是可能会因为顺序而有所不同
《1》表单修饰符
（a）v-model.lazy = "value"
（b）v-model.trim = "value"
（c）v-model.number = "value"
如果你先输入数字，那它就会限制你输入的只能是数字。
如果你先输入字符串，那它就相当于没有加.number
《2》事件修饰符
@click.prevent //阻止事件的默认行为
@click.prevent.self //会阻止所有的点击
@click.self.prevent //只会阻止对元素自身的点击
@click.once //只能触发一次
@click.native //小组件绑定事件,作用就是把一个vue组件转化为一个普通的HTML标签
//注意:使用.native修饰符来操作普通HTML标签是会令事件失效的
@click.self //只当事件是从(事件绑定的元素本身)触发时才触发回调
//触发blue元素时才能触发shout(2)
<div class="blue" @click.self="shout(2)">
<button @click="shout(1)">ok</button>
</div>
@click.stop //阻止事件冒泡（由内向外）
@click.capture //事件捕获（事件触发从包含这个元素的顶层开始往下触发）
//捕获阶段--目标阶段--冒泡阶段(结果：1,2,4,3)
<div @click.capture="shout(1)">
obj1
<div @click.capture="shout(2)">
obj2
<div @click="shout(3)">
obj3
<div @click="shout(4)">
obj4
</div>
</div>
</div>
@scroll.passive //滚动事件的默认行为 (即滚动行为) 将会立即触发,而不会等待 'onScroll' 完成
//这其中包含 'event.preventDefault()' 的情况
《3》鼠标、按钮修饰符
//event.keyCode可以直接是数字
@keyup.keyCode | @keydown.keyCode
//普通键
.enter
.tab
.delete //(捕获“删除”和“退格”键)
.space
.esc
.up
.down
.left
.right
//系统修饰键
.ctrl
.shift
.alt
.meta
.exact
注意：
1.可以通过全局 config.keyCodes 对象自定义按键修饰符别名
Vue.config.keyCodes.f1 = 112
2.普通键和系统修饰键
系统修饰键：与普通键不同的是需要和其他键码链接起来使用才起作用
@keyup.ctrl.13 //ctrl和enter键同时按
但是如果是鼠标事件，那就可以单独使用系统修饰符
//先按ctrl键,在移动鼠标触发
//存在问题:当先按下ctrl键和shift键或其他系统修饰符,在移动鼠标也能触发。解决看.exact
@mouseover.ctrl | @mousedown.ctrl
3..exact
只需要或者只能按一个系统修饰键来触发，场景:比如制作一些快捷键时候
@mouseover.ctrl.exact
《4》v-bind修饰符
（1）.sync
场景：需要对一个 prop 进行"双向绑定"。
不幸的是，真正的双向绑定会带来维护上的问题，因为子组件可以修改父组件，且在父组件和子组件都没有明显的改动来源。
（a）普通方式：
//父亲组件
<comp :myMessage="bar" @update:myMessage="func"></comp>
//js
func(e){
this.bar = e;
}
//子组件js
func2(){
this.$emit('update:myMessage',params);
}
(b).sync方式：
//父组件
<comp :myMessage.sync="bar"></comp>
//子组件
this.$emit('update:myMessage',params);
注意：
1、使用sync的时候，子组件传递的事件名必须为update:value，其中value必须与子组件中props中声明的名称完全一致(如上例中的myMessage，不能使用my-message)
2、注意带有 .sync 修饰符的 v-bind 不能和表达式一起使用 (例如 v-bind:title.sync=”doc.title + ‘!’” 是无效的)。取而代之的是，你只能提供你想要绑定的属性名，类似 v-model。
3、将 v-bind.sync 用在一个字面量的对象上，例如 v-bind.sync=”{ title: doc.title }”，是无法正常工作的，因为在解析一个像这样的复杂表达式的时候，有很多边缘情况需要考虑。
（2）.prop
Property：节点对象在内存中存储的属性，可以访问和设置。
Attribute：节点对象的其中一个属性( property )，值是一个对象。
可以通过点访问法 document.getElementById('xx').attributes 或者 document.getElementById('xx').getAttributes('xx') 读取，通过 document.getElementById('xx').setAttribute('xx',value) 新增和修改。
在标签里定义的所有属性包括 HTML 属性和自定义属性都会在 attributes 对象里以键值对的方式存在。
//这里的id,value,style都属于property
//index属于attribute
//id、title等既是属性，也是特性。修改属性，其对应的特性会发生改变；修改特性，属性也会改变
<input id="uid" title="title1" value="1" :index="index">
//input.index === undefined
//input.attributes.index === this.index
可以看到：如果直接使用v-bind绑定，则默认会绑定到dom节点的attribute。
1.通过自定义属性存储变量，避免暴露数据
2.防止污染 HTML 结构
我们可以使用这个修饰符，如下：
<input id="uid" title="title1" value="1" :index.prop="index">
//input.index === this.index
//input.attributes.index === undefined
（3）.camel
由于HTML 特性是不区分大小写的。
<svg :viewBox="viewBox"></svg>
实际上会渲染为：
<svg viewbox="viewBox"></svg>
这将导致渲染失败，因为 SVG 标签只认 viewBox，却不知道 viewbox 是什么。
如果我们使用.camel修饰符，那它就会被渲染为驼峰名。
但是如果你使用字符串模版，则没有这些限制。
new Vue({
template: '<svg :viewBox="viewBox"></svg>'
})