本文已参与「新人创作礼」活动，一起开启掘金创作之路。

Vue 修饰符

事件修饰符

Vue.js 为 v-on 提供了 事件修饰符。通过由点(.)表示的指令后缀来调用修饰符。
修饰符可以串联。

.stop

阻止单击事件冒泡

.prevent

提交事件不再重载页面

.capture

添加事件侦听器时使用时间捕获模式

.self

只当事件在该元素本身（而不是子元素）触发时触发回调

.once

限制只能触发一次

.passive

当我们在监听元素滚动事件的时候，会一直触发onscroll事件，在pc端是没啥问题的，但是在移动端，会让我们的网页变卡，因此我们使用这个修饰符的时候，相当于给onscroll事件整了一个.lazy修饰符

.native

原生事件修饰符

表单修饰符

.lazy

异步更新输入内容

.trim

过滤首尾的空格

.number

限制输入数字

鼠标按键修饰符

<button @click.right="submit">submit</button>

left 左键点击

right 右键点击

middle 中键点击

键值修饰符

在监听键盘事件时，我们经常需要监测常见的键值。 Vue 允许为 v-on 在监听键盘事件时添加按键修饰符：

    <input @keyup.enter="submit">

全部的按键别名：

• enter
• tab
• delete (捕获 “删除” 和 “退格” 键)
• esc
• space
• up
• down
• left 左键点击
• right 右键点击
• middle 中键点击
• ctrl
• alt
• meta
• shift
• exact

// 可以通过全局 config.keyCodes 对象自定义按键修饰符别名：
// 可以使用 v-on:keyup.f1
Vue.config.keyCodes.f1 = 112

v-model修饰符

懒加载 .lazy

在离开input时才更新输入的内容，在v-model后加上.lazy即可。

限定输入数字.number

<input type="text" v-model.number="name" value="name">

去掉空字符.trim

<input type="text" v-model.trim="name" value="name">

缺点：只能去掉输入框改变时的前后空字符

v-bind修饰符

.sync

常用于组件双向绑定

//父组件
<comp :myMessage.sync="bar"></comp> 
//子组件
this.$emit('update:myMessage',params);

.prop

.camel

用于不区分大小写