1、用.stop来阻止冒泡(点击click按钮之后，先执行clickBtn2方法，然后执行clickBtn1方法，.stop命令阻止了clickBtn1方法的执行)

2、使用.prevent命令来阻止默认事件

3、使用.capture实现捕获触发事件的机制，即执行完clickBtn3执行clickBtn4

4、使用.self实现只有点击当前元素的时候，才会触发事件处理函数

5、.once 值触发一次事件处理函数

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

  1. Vue—事件修饰符

    Vue事件修饰符 Vue.js 为 v-on 提供了事件修饰符来处理 DOM 事件细节,如:event.preventDefault() 或 event.stopPropagation(). Vue. ...

  2. vue事件修饰符(once:prev:stop)

    vue事件修饰符(once:prev:stop) stop修饰符  效果如下: 当你鼠标在这个div里的时候,x与y的值:会随着鼠标的变化而变化.但是当鼠标放在stopMoving的时候,x与y的值是 ...

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

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

  4. Vue事件修饰符详解

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

  5. vue事件修饰符与按钮修饰符

    事件修饰符:(当事件无需传参数时可直接写成以下形式,有参数时则为@click.stop="handleLiClick($event)") stop:阻止事件冒泡行为(子元素被点击, ...

  6. vue 事件修饰符（阻止默认行为和事件冒泡）

    1. 原生js中,阻止事件冒泡,获取点击对象, e.stopPropagation(); 2. vue阻止事件冒泡@click.stop="show" <body> & ...

  7. vue事件修饰符

    阻止单击事件冒泡 <a v-on:click.stop="doThis"></a>提交事件不再重载页面<form v-on:submit.preven ...

  8. 对官网vue事件修饰符串联的顺序如何理解？

    官网有一个提醒:使用修饰符时,顺序很重要:相应的代码会以同样的顺序产生.因此,用 v-on:click.prevent.self 会阻止所有的点击,而 v-on:click.self.prevent ...

  9. Vue事件修饰符，.capture关键字详解

    .prevent 用于阻止默认事件,点击a标签href可以打开相应的链接,那么给事件加    上此关键字,click.prevent .capture 冒泡顺序    例如 div1中嵌套div2中嵌 ...

随机推荐

  1. Ubuntu18安装Pycharm时遇到的几个问题

    今天给电脑安装了Ubuntu18.04,安装了一些基础软件. 这里是Ubuntu安装Pycharm的一些问题: 1.安装Pycharm. 首先需要到Pycharm官网进行下载安装包,由于我的是Ubun ...

  2. （Python）自动生成代码（方法一）

    在写某个平台的自动化脚本时,笔者把全部的操作都封装到了两个类中,page.py和commonpage.py: page.py部分代码: class BasePage(object): ''' 页面基础 ...

  3. Ajax简述

    AJAX即“Asynchronous Javascript And XML”(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术.AJAX = 异步 JavaScript和X ...

  4. 统一配置管理 windows linux ide maven gradle docker 【渐进式备份更新~~】

    Tips 系统盘放轻量配置(%HOMEPATH%),仓库盘放大容量文件(自己维护一份 语义化目录结构.txt). Tips               系统盘放 不经常写操作的文件(除轻量配置)    ...

  5. Swift 4.0.2 按下tab bar item时， item会有内缩的animation效果(如同Twitter的tab bar 效果一样)

    先上效果图: 假设 tab bar items 有5个.tag为0,1,2,3,4.storyboard中tab bar controller继承的class叫做xxxVC. class xxxVC: ...

  6. redis集群篇

    redis集群的搭建 1.为什么要搭建集群(解决单点问题) 通过对redis的简单了解,我们知道redis已经有两种持久化方案rdb和aof.在redis出现宕机后,可能会出现部分的数据损失,但是数据 ...

  7. C# - 设计模式目录

    什么是设计模式 设计模式(OOD)是在面向对象编程(Object Oriented Programming,OOP)中针对在以往的编程里出现的问题所提出的一种解决思路.一种设计类型时的思想和经验,对未 ...

  8. Python爬虫从入门到进阶(2)之urllib库的使用

    1.什么是Urllib(官网地址:https://docs.python.org/3/library/urllib.html#module-urllib) Urllib是python内置的HTTP请求 ...

  9. 2018-2019-1 20165231 实现mypwd（选做）

    实现mypwd 要求: 学习pwd命令 研究pwd实现需要的系统调用(man -k; grep),写出伪代码 实现mypwd 测试mypwd pwd: 在Linux层次结构中,想要知道当前所处的目录, ...

  10. 帆软报表（finereport）实现自动滚屏效果

    例如Demo:IOS平台年度数据报表. 展示内容丰富,一个页面中存在多个图表.内容,超出了浏览器窗口的大小导致内容展示不全. 为了能够预览这个报表的全部内容,可以使用JS滚屏效果来实现. 操作步骤: ...