vue提倡的是在方法中只有对数据的处理,所以提供了事件修饰符用于DOM的事件处理,常用的事件修饰符有以下几个:

(1). stop:阻止冒泡(通俗讲就是阻止事件向上级DOM元素传递)

    

  点击内层div的结果:

    

  点击外层div的结果:

    

  修改代码,为内层点击事件添加事件".stop"修饰符:

    

  再次点击内层div的结果如下:

    

(2). prevent:阻止默认事件的发生

  默认事件指对DOM的操作会引起自动执行的动作,比如点击超链接的时候会进行页面的跳转,点击表单提交按钮时会重新加载页面等,使用".prevent"修饰符可以阻止这些事件的发生。
    
       此时点击超链接不会进行页面的跳转。

(3). capture:捕获冒泡,即有冒泡发生时,有该修饰符的dom元素会先执行,如果有多个,从外到内依次执行,然后再按自然顺序执行触发的事件。

    

此时点击最内层div,结果如下:

    

多个获取事件 :
    

点击最内层结果:

    

(4). self:将事件绑定到自身,只有自身才能触发,通常用于避免冒泡事件的影响


                此时点击最内层:

(5). once:设置事件只能触发一次,比如按钮的点击等。

(6). passive:该修饰符大概意思用于对DOM的默认事件进行性能优化,根据官网的例子比如超出最大范围的滚动条滚动的。

 (7). native:在父组件中给子组件绑定一个原生的事件,就将子组件变成了普通的HTML标签,不加'. native'事件是无法触 发的。

    

    此时点击页面中的按钮无任何反应。

     添加修饰符:

    

    此时点击就会弹窗:

    

  可以理解为该修饰符的作用就是把一个vue组件转化为一个普通的HTML标签,并且该修饰符对普通HTML标签是没有任何作用的。

可参考官方文档:https://cn.vuejs.org/v2/guide/events.html#%E4%BA%8B%E4%BB%B6%E4%BF%AE%E9%A5%B0%E7%AC%A6

vue中的事件修饰符的更多相关文章

  1. 怎样在 Vue 中使用 事件修饰符 ?

    Vue 中可以通过 v-on 来绑定事件监听函数, 不过事件会有许多额外情况, 比如 是否阻止冒泡 / 是否阻止重载 / 是否限制点击次数 / 是否可以通过按键触发 等等. 这时就需要使用到 事件修饰 ...

  2. 33、vue中的事件修饰符.stop、.prevent、.self、.capture、.once

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

  3. (二)咋使用VUE中的事件修饰符

    1,stop修饰符:阻止事件冒泡 首先我们要明确H5的事件是从内向外进行冒泡的,写一个简单的DEMO 当我们点击按钮时,事件从内向外冒泡,依次触发绑定的事件,控制台信息如下 现在我们在click后面添 ...

  4. vue中的.passive修饰符

    一.passive作用 详情请参考MDN(https://developer.mozilla.org/zh-CN/docs/Web/API/EventTarget/addEventListener)中 ...

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

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

  6. vue指令与事件修饰符

    一.条件渲染指令 vue中提供了两个指令可以用于判断是否要显示元素,分别是v-if和v-show. 实例: <!DOCTYPE html> <html lang="en&q ...

  7. vue学习(六) 事件修饰符 stop prevent capture self once

    //html <div id="app"> <div @click="divHandler" style="height:150px ...

  8. Vue指令之事件修饰符

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

  9. vue中的.native修饰符

    如果你想在某个组件的根元素上绑定事件,直接使用 @click=''function' 是不生效的,我们可以添加.native修饰符 @click.native=''function'',请看以下dem ...

随机推荐

  1. 搞不懂的算法-排序篇<2>

    上一篇排序算法<1>中,排序算法的时间复杂度从N2到NlgN变化,但他们都有一个共同的特点,基于比较和交换数组中的元素来实现排序,我们称这些排序算法为比较排序算法.对于比较排序算法,所有的 ...

  2. 点击之后上传图片到页面 input type="file" 样式

    <!DOCTYPE html><head> <meta http-equiv="Content-Type" content="text/ht ...

  3. Oracle下rman备份和还原到数据库任意一个时间点

    Rman备份为物理备份,启用rman备份必须开启数据库归档,开启归档后相当于给数据库加了一层双保险.Rman备份主要备份数据库的数据文件,控制文件,归档日志. RMAN 备份 一. 检查数据库是否启用 ...

  4. K8s的工作原理

    title: Kubernetes之初探 subtitle: K8s的工作原理 date: 2018-09-18 18:26:37 --- K8s概述 我清晰地记得曾经读到过的一篇博文,上面是这样写的 ...

  5. C#学习 第六节

    什么是类型(Type)? 类型在C#中的作用 C#语言的类型系统 变量.对象与内存 类型(Type):数据类型 性质相同的值得集合:内存:内部存储单元,计算机运行程序的空间:外存:扩展存储器,硬盘: ...

  6. js中标签字符串的拼接

    //1.用单双引号拼接 var valueDemo = "111"; var htmlStrs1 = '<option selected="selected&quo ...

  7. mysql笔记1------基础

    1.简介 (这两个结构就是ER模型)

  8. BZOJ 1197 [HNOI2006]花仙子的魔法 (数学题)

    题面:洛谷传送门 BZOJ传送门 非常有意思的一道数学题,浓浓的$CF$风,然而我并没有想出来.. 我们想把一个$n$维空间用$n$维球分成尽可能多的块 而新增加一个$n$维球时,肯定要尽可能多地切割 ...

  9. [luogu2052 NOI2011] 道路修建 (树形dp)

    传送门 Description 在 W 星球上有 n 个国家.为了各自国家的经济发展,他们决定在各个国家 之间建设双向道路使得国家之间连通.但是每个国家的国王都很吝啬,他们只愿 意修建恰好 n – 1 ...

  10. Hibernate Session操作

    1.增加 @Test public void add(){ Configuration cfg=new Configuration().configure(); SessionFactory fact ...