.stop阻止冒泡

.prevent阻止默认行为

.capture实现捕获触发事件的机制（从大到小）

.self实现只有点击当前元素时，才能出发事件处理函数

.once只触发一次事件函数

.stop和.self的区别

.self只会阻止自己身上的冒泡行为，不会真正的阻止冒泡的行为

v-on事件修饰符的更多相关文章

  1. Vue学习笔记五：事件修饰符

    目录 什么是事件修饰符 没有事件修饰符的问题 HTML 运行 使用事件修饰符 .stop阻止冒泡 .prevent 阻止默认事件 .capture 添加事件侦听器时使用事件捕获模式 .self 只当事 ...

  2. 从零开始学 Web 之 Vue.js（一）Vue.js概述，基本结构，指令，事件修饰符，样式

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...

  3. vue第八单元(组件通信 子父，父子组件通信 自定义事件 事件修饰符 v-model props验证 )

    第八单元(组件通信 子父,父子组件通信 自定义事件 事件修饰符 v-model props验证 ) #课程目标 掌握使用props让父组件给子组件传参(重点) 掌握props属性的使用以及prop验证 ...

  4. VueJS 事件修饰符

    事件修饰符 在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation()是非常常见的需求.尽管我们可以在 methods 中轻松实现这点,但更 ...

  5. Vue.js-03：第三章 - 事件修饰符的使用

    一.前言 熟悉了 Vue 的指令系统后,在实际开发中,不可避免的会使用到对于事件的操作,如何处理 DOM 事件流,成为我们必须要掌握的技能.不同于传统的前端开发,在 Vue 中给我们提供了事件修饰符这 ...

  6. vue_事件绑定 v-on _事件修饰符

    事件绑定 v-on 传参的同时,接收事件对象 <button @click="test('111', $evnt)">哈哈</button> 事件修饰符 阻 ...

  7. [vue]vue v-on事件绑定(原生修饰符+vue自带事件修饰符)

    preventDefault阻止默认行为和stopPropagation终止传递 event.preventDefault() 链接本来点了可以跳转, 如果注册preventDefault事件,则点了 ...

  8. Vue2.0学习笔记：Vue事件修饰符的使用

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

  9. v-on 事件修饰符

    事件修饰符:   .stop 阻止冒泡 .prevent 阻止默认事件 .capture 添加事件侦听器时使用事件捕获模式 .self 只当该事件在该元素本身时(不是子元素)触发时才回调 .once ...

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

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

随机推荐

  1. 8.Hash集合类型操作使用

    数据类型Hash (1)介绍 hash数据类型存储的数据与mysql数据库中存储的一条记录极为相似 Redis本身就类似于Hash的存储结构,分为key-value键值对,实际上它的Hash数据就好像 ...

  2. Java的字节流，字符流和缓冲流对比探究

    目录 一.前言 二.字节操作和字符操作 三.两种方式的效率测试 3.1 测试代码 3.2 测试结果 3.3 结果分析 四.字节顺序endian 五.综合对比 六.总结 一.前言 所谓IO,也就是Inp ...

  3. [JavaWeb基础] 019.Struts2 MVC架构之ModelDriven

    用过struts1的人接触struts2的时候,通常会产生一个疑惑,明明struts1已经把action的form分开了,为什么struts2确把模型放在action中定义.其实这个方式只是想让act ...

  4. git status 命令详解

    git status命令表示:文件,文件夹在工作区,暂存区的状态,下图就是文件,文件夹三种状态: Changes to be committed: (use "git restore --s ...

  5. 附019.Rancher搭建及使用

    一 Rancher概述 1.1 什么是Rancher Rancher 是为使用容器的公司打造的容器管理平台.Rancher 简化了使用 Kubernetes 的流程,方便开发者可以随处运行 Kuber ...

  6. Chisel3-Intellij IDEA安装Scala插件

    https://mp.weixin.qq.com/s/xTk5ucvSNuwsh8C6E362cg   后续开启RISC-V开发相关内容.   RISC-V开发推荐使用Chisel编程语言.Chise ...

  7. 【Storm】安装教程

    1.下载tar.gz包 2.上传解压,tar -zxvf 包 -C 路径 3.修改conf/storm.yaml storm.zookeeper.servers: - "bigboss1&q ...

  8. ssh-copy-id to filter out any that...ERROR: Read from socket failed: Connection reset by peer

    ssh-copy-id bigboss1 /usr/bin/ssh-copy-id: INFO: attempting to log in with the new key(s), to filter ...

  9. Java实现 LeetCode 838 推多米诺（暴力模拟）

    838. 推多米诺 一行中有 N 张多米诺骨牌,我们将每张多米诺骨牌垂直竖立. 在开始时,我们同时把一些多米诺骨牌向左或向右推. 每过一秒,倒向左边的多米诺骨牌会推动其左侧相邻的多米诺骨牌. 同样地, ...

  10. Java实现 LeetCode 677 键值映射（字典树）

    677. 键值映射 实现一个 MapSum 类里的两个方法,insert 和 sum. 对于方法 insert,你将得到一对(字符串,整数)的键值对.字符串表示键,整数表示值.如果键已经存在,那么原来 ...