首页 > 编程知识 正文

Vue事件修饰符,vue的修饰符有哪些

时间:2023-05-06 16:21:55 阅读:201537 作者:278

vue中有哪些修饰符和事件修饰符

1、常见修饰符有.sync,.lazy,.passive
(1).sync
因为vue是单向数据流,从父组件传到子组件的数据,子组件如果修改数据会报错,加上.sync后子组件内部改变props属性值并更新到父组件中
(2).lazy
v-model双向数据绑定,输入框输入内容时视图就更新了,如果想要输入完所有数据再更新视图,可以通过添加.lazy实现光标离开后再更新视图

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

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

<div v-on:scroll.passive="onScroll">...</div>

(4).native
这个修饰符只能是操作在组件上,把一个vue组件转化为一个普通的HTML标签,如果是操作在普通HTML标签上会失效
2、常见的事件修饰符.stop, .prevent, .self, .capture, .passive, .once
(1).stop
防止事件冒泡,通俗来说就是阻止事件向父元素传递,阻止任何父事件处理程序被执行,等同于JavaScript中的event.stopPropagation()。
(2).prevent
某些标签拥有自身的默认事件,比如标签点击后会进行页面的跳转。这类默认事件虽然是冒泡后开始的,但不会因为stop而停止执行。阻止执行这类预设的行为,.prevent就派上用场了。
(3).capture
捕获冒泡,即冒泡发生时,有.capture修饰符的dom元素会优先执行
(4).self
将事件绑定到自身,只有自身才能触发,通常用于避免冒泡事件的影响
(5).once
这个比较好理解,加上once修饰符以后事件只触发一次,但是不影响事件的冒泡,上层的事件仍然会被触发,并且页面刷新后这个次数会重置。
(6).passive
使用.passive就可以提前告诉浏览器,我们没有用preventDefault阻止默认动作,你也不用反复去判断了,从而提高性能解决卡顿。

版权声明:该文观点仅代表作者本人。处理文章:请发送邮件至 三1五14八八95#扣扣.com 举报,一经查实,本站将立刻删除。