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. 07--STL序列容器（Array）

    一:Array了解 array<T,N> 模板定义了一种相当于标准数组的容器类型.它是一个有 N 个 T 类型元素的固定序列.除了需要指定元素的类型和个数之外,它和常规数组没有太大的差别. ...

  2. QPS从0到4000请求每秒，谈达达后台架构演化之路

    达达是全国领先的最后三公里物流配送平台. 达达的业务模式与滴滴以及Uber很相似,以众包的方式利用社会闲散人力资源,解决O2O最后三公里即时性配送难题(目前达达已经与京东到家合并). 达达业务主要包含 ...

  3. 实现IOC功能的简单Spring框架

    需求分析 设计一个含有IOC的简单Spring,要求含有对象注册.对象管理以及暴露给外部的获取对象功能. 项目设计 对于注册的对象用一个类BeanInfo来描述其信息,包括对象标识.全类名以及属性名与 ...

  4. docker 容器网络基础

    ======================== docker缺省自带的网络 ======================== host 网络, This enables a container to ...

  5. Nginx 完全配置

    入门教程 初识Nginx 你真的了解如何将 Nginx 配置为Web服务器吗 设置静态网页编码 --> 针对非类Unix系统 针对服务器 http { ... charset UTF-8; .. ...

  6. BeautifulSoup爬网页图片

    #-*- coding: utf-8 -*- import urllib2 import urllib import os from BeautifulSoup import BeautifulSou ...

  7. JavaScript表单验证的相关事件

    1．  表单元素: a)         Input标签:文本框(text)—密码框(password)—单选—复选框—文件—图像—隐藏—按钮—提交—重置,表单元素都在input标签 b)       ...

  8. PostgreSQL学习笔记(二)-安装pgAdmin

    继上篇安装PostgreSQL后,我们需要安装一个PostgreSQL的图形化管理工具. pgadmin管理工具 创建Python的虚拟环境 cd /root/venv python -m venv ...

  9. Python爬虫从入门到进阶(3)之requests的使用

    快速上手(官网地址:http://www.python-requests.org/en/master/user/quickstart/) 发送请求 首先导入Requests模块 import requ ...

  10. input子系统学习笔记六 按键驱动实例分析下【转】

    转自:http://blog.chinaunix.net/uid-20776117-id-3212095.html 本文接着input子系统学习笔记五 按键驱动实例分析上接续分析这个按键驱动实例! i ...