文档章节

vue 事件修饰符

o
 osc_z1hvg4cu
发布于 2018/04/24 15:53
字数 255
阅读 11
收藏 0

精选30+云产品,助力企业轻松上云!>>>

1、修饰符种类

  • .stop
  • .prevent
  • .capture
  • .self
  • .once
  • .passive

2、self修饰符说明

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

使用修饰符时,顺序很重要;相应的代码会以同样的顺序产生。因此,用 v-on:click.prevent.self 会阻止所有的点击,而 v-on:click.self.prevent 只会阻止对元素自身的点击。

3、passive修饰符说明

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

这个 .passive 修饰符尤其能够提升移动端的性能。

不要把 .passive 和 .prevent 一起使用,因为 .prevent 将会被忽略,同时浏览器可能会向你展示一个警告。请记住,.passive 会告诉浏览器你_不_想阻止事件的默认行为。

 为什么使用pssive修饰符请参考:https://blog.csdn.net/shenlei19911210/article/details/70198771

o
粉丝 0
博文 500
码字总数 0
作品 0
私信 提问
加载中
请先登录后再评论。
Vue 事件处理

原生的js事件处理 原生的js事件处理,可以分为:直接内联执行代码,或者绑定事件函数。 在内联的事件处理函数内部或者事件绑定的方法内部的作用域中的this都是指向当前的dom对象。如何在vue...

osc_2koyq9mo
2019/02/22
1
0
VUE课程---8、事件修饰符

VUE课程---8、事件修饰符 一、总结 一句话总结: vue中可以可以用事件修饰符来做我们事件操作中常用的阻止默认事件(event.preventDefault())或者阻止事件冒泡(event.stopPropagation())等...

范仁义
04/18
0
0
Vue2.0学习笔记:Vue事件修饰符的使用

事件处理 如果需要在内联语句处理器中访问原生DOM事件。可以使用特殊变量,把它传入到中的方法中。 在Vue中,事件修饰符处理了许多DOM事件的细节,让我们不再需要花大量的时间去处理这些烦恼...

osc_u69w8vfw
2018/08/02
4
0
VUE课程---12、事件修饰符

VUE课程---12、事件修饰符 一、总结 一句话总结: vue中可以可以用事件修饰符来做我们事件操作中常用的阻止默认事件(event.preventDefault())或者阻止事件冒泡(event.stopPropagation())...

范仁义
05/14
0
0
四、vue语法补充

1.自定义过滤器   格式: {{ msg | filters}} 2.computed 属性默认只有 getter ,不过在需要时你也可以提供一个 setter <!DOCTYPE html><html lang="en"><head> </head><body><div id="app......

osc_vg6s3gcq
2018/07/17
0
0

没有更多内容

加载失败,请刷新页面

加载更多

小程序上传帖子(含有文字图片的微信验证)

public.js var graceJS = require('../../utils/grace.js');import { config } from '../../config.js'Page({ /** * 页面的初始数据 */ data: { imglist: [], title:'......

子枫Eric
40分钟前
28
0
如今大火的算法框架TensorFlow,都有哪些值得一看的好书呢?

TensorFlow™是一个基于数据流编程(dataflow programming)的符号数学系统,被广泛应用于各类机器学习(machine learning)算法的编程实现,其前身是谷歌的神经网络算法库DistBelief 。 Te...

程序员知识码头
41分钟前
15
0
聊聊rocketmq-client-go的pushConsumer

序 本文主要研究一下rocketmq-client-go的pushConsumer pushConsumer rocketmq-client-go-v2.0.0/consumer/push_consumer.go type pushConsumer struct {*defaultConsumerqueueFlowCont......

go4it
42分钟前
20
0
限制Android中EditText的文本长度 - Limit text length of EditText in Android

问题: What's the best way to limit the text length of an EditText in Android? 限制Android中EditText文本长度的最佳方法是什么? Is there a way to do this via xml? 有没有办法通过x......

法国红酒甜
47分钟前
20
0
2020还是AI最火?推荐几本深度学习的书籍帮你入门!

最近公司里有一些关于算法方面的工作,想到能学点有趣的新技术,于是毫不犹豫地参加了学习,机器学习,深度学习,离我们Java工程师到底远不远,说近不近,说远也不远,我们甚至可以在没有太多...

黄小斜
56分钟前
21
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部