在日常开发的工作中，我们会经常的使用到vue的修饰符，在Vue中，修饰符处理了许多DOM事件的细节，让我们不再需要花大量的时间去处理这些烦恼的事情，而能有更多的精力专注于程序的逻辑处理。在这里就经常使用的进行一下总结：

在vue中修饰符分为以下五种：

• 表单修饰符
• 事件修饰符
• 鼠标按键修饰符
• 键值修饰符
• v-bind修饰符

一、表单修饰符

我们在写表达是时候主要配合input 标签中的指令v-model使用：

1. lazy

   • 在信息改变，光标离开标签的时候，才会将数据赋值给value，也就是触发change事件，再同步信息

   <!-- 在“change”时而非“input”时更新 -->
   <input v-model.lazy="msg">
   

2. trim

   • 在输入框中，主要用于自动过滤首尾空白字符，（注意中间的不会过滤的）

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

3. number

   • 当需要收集的值类型必须是数据类型的时候，可以添加number修饰符限制或者改变数据类型（注意先输入字符串再输入数字，相当于没有添加）

   <input v-model.number="age">
   

二、事件修饰符

1. .stop

   • 阻止了事件冒泡，相当于调用了event.stopPropagation方法

   <!-- 阻止单击事件继续传播 -->
   <a v-on:click.stop="doThis"></a>
   

2. .prevent

   • 阻止了事件的默认行为，相当于调用了event.preventDefault方法，防止执行预设的行为（如果事件可取消，则取消该事件，而不停止事件的进一步传播）

   <!-- 提交事件不再重载页面 -->
   <form v-on:submit.prevent="onSubmit"></form>
   
   <!-- 修饰符可以串联 -->
   <a v-on:click.stop.prevent="doThat"></a>
   

3. .self

   • 只当在 event.target 是当前元素自身时触发处理函数，相当于将事件绑定在自身身上，相当于阻止事件冒泡，只会触发自己范围内的事件，不包含子元素

   <!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
   <!-- 即事件不是从内部元素触发的 -->
   <div v-on:click.self="doThat">...</div>
   

4. .once

   • 绑定了事件以后只能触发一次，第二次就不会触发

   <!-- 点击事件将只会触发一次 -->
   <a v-on:click.once="doThis"></a>
   

5. .capture

   • 使事件触发从包含这个元素的顶层开始往下触发

   <!-- 添加事件监听器时使用事件捕获模式 -->
   <!-- 即内部元素触发的事件先在此处理，然后才交由内部元素进行处理 -->
   <div v-on:click.capture="doThis">...</div>
   

6. .passive

   • 移动端，当我们在监听元素滚动事件的时候，会一直触发onscroll事件会让我们的网页变卡，因此我们使用这个修饰符的时候，相当于给onscroll事件整了一个.lazy修饰符（注意不要.passive和.prevent一起使用）

   <!-- 滚动事件的默认行为 (即滚动行为) 将会立即触发 -->
   
   <!-- 而不会等待 `onScroll` 完成 -->
   
   <!-- 这其中包含 `event.preventDefault()` 的情况 -->
   
   <div v-on:scroll.passive="onScroll">...</div>
   

7. .native

   • 在一个组件的根元素上直接监听一个原生事件，相当于JavaScript中绑定原生事件

   <base-input v-on:focus.native="onFocus"></base-input>
   

   • 注意使用.native修饰符来操作普通HTML标签是会令事件失效的
   • 用 v-on:click.prevent.self 会阻止所有的点击，而 v-on:click.self.prevent 只会阻止对元素自身的点击。

三、鼠标按钮修饰符

鼠标按钮修饰符针对的就是左键、右键、中键点击，只会限制在处理函数响应特定的鼠标按钮上，有如下：

1. .left

   • 左键点击

2. .right

   • 右键点击

3. .middle

   • 中键点击

   <button @click.left="shout(1)">ok</button>
   
   <button @click.right="shout(1)">ok</button>
   
   <button @click.middle="shout(1)">ok</button>
   

四、按键修饰符

在我们的项目经常需要监听一些键盘事件来触发程序的执行，而Vue中允许在监听的时候添加关键修饰符：

• .enter：回车键
• .tab：制表键
• .delete：删除键
• .esc：返回键
• .space：空格键
• .up：向上键
• .down：向下键
• .left：向左键
• .right：向右键

<input v-on:keyup.enter="submit">

还可以通过以下方式自定义一些全局的键盘码别名

Vue.config.keyCodes.f2 = 113

五、v-bind修饰符

v-bind修饰符主要是为属性进行操作，用来分别有如下：

1. .sync

   • 能对props进行一个双向绑定，主要用于父子组件之间的数据传值，是update:myPropName 的模式触发事件的一个缩写

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

   • 使用async需要注意以下两点：

   1. .sync 修饰符的 v-bind 不能和表达式一起使用
   2. • 将 v-bind.sync 用在一个字面量的对象上，例如 v-bind.sync=”{ title: doc.title }”，是无法正常工作的

2. .prop

   • 作为一个 DOM property 绑定而不是作为 attribute 绑定。避免暴露数据，防止污染HTML结构

   <input id="uid" title="title1" value="1" :index.prop="index">
   

3. .camel

   • 将命名变为驼峰命名法，如将view-Box属性名转换为 viewBox

   不加camel viewBox会被识别成viewbox
   <svg :viewBox="viewBox"></svg>
   
   加了canmel viewBox才会被识别成viewBox
   <svg :viewBox.camel="viewBox"></svg>