.sync

作用: 允许props数据的双向数据绑定 , 不能和表达式一起使用,例如 v-bind:title.sync=”doc.title + ‘!’” 是无效的
复制代码

//子组件
this.$emit('update:title', newTitle)

//父组件
<text-document
  v-bind:title="doc.title"
  v-on:update:title="doc.title = $event"
></text-document>


//等价于上面的
<text-document v-bind:title.sync="doc.title"></text-document>

复制代码

当我们用一个对象同时设置多个 prop 的时候，也可以将这个 .sync 修饰符和 v-bind 配合使用：

<text-document v-bind.sync="doc"></text-document>
复制代码

这样会把 doc 对象中的每一个属性 (如 title) 都作为一个独立的 prop 传进去，然后各自添加用于更新的 v-on 监听器。

.lazy

作用: v-model双向数据绑定的时候, 只要输入框的数据改变,绑定的model数据也会随之改变, 而 lazy修饰符会在光标离开input框才会更新数据
复制代码

<input type="text" v-model.lazy="value">
复制代码

.trim

作用: 输入框过滤首尾的空格
复制代码

<input type="text" v-model.trim="value">
复制代码

.number

作用: 先输入数字 就会限制输入只能是数字, 先字符串就相当于没有加上number, 注意, 不是输入框不能输入字符串, 是这个数据是数字.
复制代码

<input type="text" v-model.number="value">
复制代码

.stop

作用: 阻止事件冒泡, 相当于调用了调用了event.stopPropagation()方法
复制代码

<button @click.stop="test">test</button>
复制代码

.present

作用: 阻止默认行为, 相当于调用了event.preventDefault()方法,比如表单的提交,a标签的跳转就是默认事件
复制代码

<a @click.prevent="test">test</a>
复制代码

.self

作用: 只有元素本身触发时才触发方法,就是只有点击元素本身才会触发事件.

比如: div中有按钮, 并且div和按钮各自绑定了点击事件, 正常情况下, 点击按钮,也会触发div的点击方法, 但是如果在div的点击事件上加上self,那么就只有点击div本身时,该事件才会触发, 相当于变相的阻止事件冒泡.
复制代码

<div @click.self="test"></div>
复制代码

.once

 作用: 只能用一次,无论点击几次,执行一次之后就不会再执行
复制代码

<div @click.once="test"></div>
复制代码

.capture

作用: 事件的完整机制是捕获-目标-冒泡，事件触发是目标往外冒泡
复制代码

<div @click="test(1)">  <button @click="test(2)">test</button></div>

点击顺序: 先2后1, 而capture的作用,则是让这个顺序相反

<div @click.capture="test(1)">  <button @click="test(2)">test</button></div>

点击顺序: 先1后2
复制代码

.passive

作用: 提升移动端的性能, 在每次滚动中都会有一个默认事件会触发,加上这个,则是告诉浏览器, 不需要查询, 不需要触发这个默认事件.
复制代码

<!-- 滚动事件的默认行为 (即滚动行为) 将会立即触发 --> 

<!-- 而不会等待 `onScroll` 完成 -->

<!-- 这其中包含 `event.preventDefault()` 的情况 -->

<div v-on:scroll.passive="onScroll">...</div>
复制代码

.native

 作用: 让自定义组件可以响应到自身绑定的事件
复制代码

//没有加上native, 点击事件无效
<my-component @click.native="onClick"></my-component>
复制代码

鼠标.left、.reight、.middle

 作用: 点击鼠标对应按键就会触发
复制代码

<button @click.left="test">test</button>
复制代码

.keyCode

 作用: 监听按键的指令,在vue的官网可以看到对应的 键码对应表
复制代码

<input type="text" @keyup.enter="test(1)">
<button @click.enter="test(1)">test</button>
复制代码

注意: 只有你点击过一次或者聚焦到这个输入框才能使用键盘触发。
复制代码

.exact

作用: 系统修饰键,只要按着这个键然后用鼠标点击才会触发.
复制代码

<!-- 即使 Alt 或 Shift 被一同按下时也会触发 -->

 <button @click.ctrl="onClick">A</button>

<!-- 有且只有 Ctrl 被按下的时候才触发 -->

<button @click.ctrl.exact="onCtrlClick">A</button>

<!-- 没有任何系统修饰符被按下的时候才触发 -->
<button @click.exact="onClick">A</button>
复制代码