重新整理一下Vue的技术点---常用修饰符(持续更新)

常用的修饰符有一下几种：

1.v-model修饰符：

1、.lazy：输入框改变，这个数据就会改变，lazy这个修饰符会在光标离开input框才会更新数据：

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

2、.trim：输入框过滤首尾的空格：

<input v-model.trim="msg">

3、.number：先输入数字就会限制输入只能是数字，先字符串就相当于没有加number，注意，不是输入框不能输入字符串，是这个数据是数字：

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

2.事件修饰符：

1、.stop：阻止事件冒泡，相当于调用了event.stopPropagation()方法：

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

2、.prevent：阻止默认行为，相当于调用了event.preventDefault()方法，比如表单的提交、a标签的跳转就是默认事件：

<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>

3、.self：只有元素本身触发时才触发方法，就是只有点击元素本身才会触发。比如一个div里面有个按钮，div和按钮都有事件，我们点击按钮，div绑定的方法也会触发，如果div的click加上self，只有点击到div的时候才会触发，变相的算是阻止冒泡

<!-- 只当在 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、.native： 监听组件根元素的原生事件（可以理解为该修饰符的作用就是把一个vue组件转化为一个普通的HTML标签）

<My-component @click.native="xxxx"></My-component>

注意：使用.native修饰符来操作普通HTML标签是会令事件失效的 

注意：修饰符可以同时使用多个,但是可能会因为顺序而有所不同。
用 v-on:click.prevent.self 会阻止所有的点击，而 v-on:click.self.prevent 只会阻止对元素自身的点击。

3.键盘事件修饰符：

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

<!-- 只有在 `keyCode` 是 13 时调用 `vm.submit()` -->
<input v-on:keyup.13="submit">

记住所有的 keyCode 比较困难，所以 Vue 为最常用的按键提供了别名：

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

<!-- 缩写语法 -->
<input @keyup.enter="submit">

常用的按键别名：

• .enter
• .tab
• .delete (捕获“删除”和“退格”键)
• .esc
• .space
• .up
• .down
• .left
• .right

4..sync(2.3.0+ 新增)

在有些情况下，可能需要对一个 prop 进行“双向绑定”。但真正的双向绑定会带来维护上的问题，因为子组件可以修改父组件，且在父组件和子组件都没有明显的改动来源。我们通常的做法是

//父亲组件
<comp :myMessage="bar" @update:myMessage="func"></comp>
//js
func(e){
 this.bar = e;
}
//子组件js
func2(){
  this.$emit('update:myMessage',params);
}

.sync修饰符就是简化了上面的步骤

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

注意：

1. 使用sync的时候，子组件传递的事件名必须为update:value，其中value必须与子组件中props中声明的名称完全一致(如上例中的myMessage，不能使用my-message)
3. 带有 .sync 修饰符的 v-bind 不能和表达式一起使用 (例如 v-bind:title.sync=”doc.title + ‘!’” 是无效的)。取而代之的是，你只能提供你想要绑定的属性名，类似 v-model。
4. 将 v-bind.sync 用在一个字面量的对象上，例如 v-bind.sync=”{ title: doc.title }”，是无法正常工作的，因为在解析一个像这样的复杂表达式的时候，有很多边缘情况需要考虑。