==.stop== 是阻止冒泡行为,不让当前元素的事件继续往外触发,如阻止点击div内部事件,触发div事件
==.prevent== 是阻止事件本身行为,如阻止超链接的点击跳转,form表单的点击提交
==.self== 是只有是自己触发的自己才会执行,如果接受到内部的冒泡事件传递信号触发,会忽略掉这个信号
==.capture== 是改变js默认的事件机制,默认是冒泡,capture功能是将冒泡改为倾听模式
==.once== 是将事件设置为只执行一次,如 .click.prevent.once 代表只阻止事件的默认行为一次,当第二次触发的时候事件本身的行为会执行
==.passive== 滚动事件的默认行为 (即滚动行为) 将会立即触发，而不会等待 onScroll 完成。这个 .passive 修饰符尤其能够提升移动端的性能。

.passive 和 .prevent 不能一起使用:

  • .prevent 将会被忽略

.self 和 .stop 区别:

  • self只响应当前元素自身触发的事件，不会响应经过冒泡触发的事件，并不会阻止冒泡继续向外部触发。
  • stop是从自身开始不向外部发射冒泡信号

觉得有帮助的小伙伴点个赞~

vue中事件修饰符详解(stop, prevent, self, once, capture, passive)的更多相关文章

  1. Vue事件修饰符详解

    整体学习Vue时看到Vue文档中有事件修饰符的描述,但是看了之后并没有理解是什么意思,于是查阅了资料,现在记录下来与大家分享 先给大家画一个示意图理解一下冒泡和捕获 (1) .stop修饰符 请看如下 ...

  2. 026——VUE中事件修饰符之使用$event与$prevent修饰符操作表单

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. vue 2.x 的 v-bind 指令的 .prop 事件修饰符详解

    vue 官方文档对 .prop 修饰符的解释是: 使用例子: 那么,具体的原理和用法是什么呢?这要从 html 的 DOM node 说起. 在 html 标签里,我们可以定义各种 attribute ...

  4. 027——VUE中事件修饰符：stop prevent self capture

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. VUE中事件修饰符：stop prevent self capture

    <!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8 ...

  6. 028——VUE中事件修饰符once

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. vue中的修饰符

    Vue2.0学习笔记:Vue事件修饰符的使用   事件处理 如果需要在内联语句处理器中访问原生DOM事件.可以使用特殊变量$event,把它传入到methods中的方法中. 在Vue中,事件修饰符处理 ...

  8. Vue的事件修饰符

    转载于:https://www.cnblogs.com/xuqp/p/9406971.html 事件处理 如果需要在内联语句处理器中访问原生DOM事件.可以使用特殊变量$event,把它传入到meth ...

  9. Java之Static静态修饰符详解

    Java之Static静态修饰符详解 Java之Static静态修饰符详解 一.特点 1.随着类的加载而加载,随着类的消失而消失,生命周期最长 2.优先于对象存在 3.被所有类的对象共享 4.可以直接 ...

随机推荐

  1. Apache性能测试工具ab使用详解~转载

    Apache自带性能测试工具ab使用详解 一. Apache的下载 1. http://www.apache.org/,进入Apache的官网 2. 将页面拖到最下方“Apache Project L ...

  2. 如何用python进行邮件发送

    使用Python调用邮件服务器发送邮件,使用的协议是SMTP(Simple Mail Transfer Protocol),下图为使用TCP/IP基于SMTP发送邮件的过程示意图: SMTP协议工作原 ...

  3. 对微软的敌视何时休？ 从一篇语言评论文章对C#的评价说起

    看到一篇公众号文章<2020年什么编程语言最受欢迎,待遇最高?>,其中对C#的描述如下: 点击阅读原文,看到这是一篇翻译文章:https://codinginfinite.com/top- ...

  4. IoT时代：Wi-Fi“配网”技术剖析总结

    导读 近年来,物联网市场竞争激烈,从物联网平台厂商,设备生产商,到服务提供商,都在涌入这片红海.预计到2020年,全球联网设备数量将达到260亿个,年复合增长率达到20%:全球联网设备带来的数据将达到 ...

  5. RN 性能优化

    按需加载: 导出模块使用属性getter动态require 使用Import语句导入模块,会自动执行所加载的模块.如果你有一个公共组件供业务方使用,例如:common.js import A from ...

  6. SpringBoot 配置 AOP 打印日志

    在项目开发中,日志系统是必不可少的,用AOP在Web的请求做入参和出参的参数打印,同时对异常进行日志打印,避免重复的手写日志,完整案例见文末源码. 一.Spring AOP AOP(Aspect-Or ...

  7. 使用.Net Core + Vue + IdentityServer4 + Ocelot 实现一个简单的DEMO +源码

    运行环境 Vue 使用的是D2admin: https://doc.d2admin.fairyever.com/zh/ Github地址:https://github.com/Fengddd/Perm ...

  8. 详解golang net之transport

    关于golang http transport的讲解,网上有很多文章读它进行了描述,但很多文章讲的都比较粗,很多代码实现并没有讲清楚.故给出更加详细的实现说明.整体看下来细节实现层面还是比较难懂的. ...

  9. HDU 6315

    题意略. 思路:本题的思路总的来说就是暴力 + 剪枝. 我们依然用线段树来维护: 定义结点node{ l , r , minn , contirbute} 分别为某个区间的左右端点,和该区间(b序列) ...

  10. Spring Boot 2.0 教程 | 快速集成整合消息中间件 Kafka

    欢迎关注个人微信公众号: 小哈学Java, 每日推送 Java 领域干货文章,关注即免费无套路附送 100G 海量学习.面试资源哟!! 个人网站: https://www.exception.site ...