Vue修饰符集合__Vue.js
发布于 2 个月前 作者 banyungong 373 次浏览 来自 分享
粉丝福利 : 关注VUE中文社区公众号,回复视频领取粉丝福利
.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><p style="line-height: 20px; color: #ccc">
    版权声明:著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
    作者: ALLen、LAS
    原文链接:<a href='https://juejin.im/post/6844904103500316680'>https://juejin.im/post/6844904103500316680</a>
  </p>
回到顶部