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. I/O模型系列之四：两种高性能IO设计模式 Reactor 和 Proactor

    不同的操作系统实现的io策略可能不一样,即使是同一个操作系统也可能存在多重io策略,常见如linux上的select,poll,epoll,面对这么多不同类型的io接口,这里需要一层抽象api来完成, ...

  2. Hadoop记录-切换NN

    一.第一种方法 重启namenode(1.1.1.1 1.1.1.2)重启standby节点:1.1hadoop-daemon.sh stop zkfchadoop-daemon.sh stop na ...

  3. Dynamics CRM 日常使用JS整理（二）

    BPF(Business Process Flow)相关的JS 为Stage添加changed或者selected事件: function fnOnLoad() { Xrm.Page.data.pro ...

  4. 网络协议 HTTP入门学习

    概述 Web 的诞生,源于三大技术的诞生,它们都是当年 Web 之父 Tim Berners-Lee 自己 开发的,世界上第一个网站诞生的时间是 1991 年,三大技术的诞生也就是在此之前的不久: 1 ...

  5. print number

    # -*- coding: utf-8 -*-"""------------------------------------------------- File Name ...

  6. python3 练手实例5 做一个简单电子时钟

    import time,sys,os while(1): t = time.strftime('%Y-%m-%d\n%H:%M:%S',time.localtime(time.time())) pri ...

  7. luogu P5324 [BJOI2019]删数

    传送门 不如先考虑暴力,能删的序列首先有\(1,2,3...n\),还有就是升序排序后从后往前放数,第\(i\)位要么放\(i\),要么放\(i+1\)位置的数,例如\(1,2,4,4,5,6,9,9 ...

  8. hdu5974 A Simple Math Problem(数学)

    题目链接 大意:给你两个数X,YX,YX,Y,让你找两个数a,ba,ba,b,满足a+b=X,lcm(a,b)=Ya+b=X,lcm(a,b)=Ya+b=X,lcm(a,b)=Y. 思路:枚举gcd( ...

  9. 初识Asp.Net WebApi

    using System;using System.Collections.Generic;using System.Linq;using System.Net.Http;using System.T ...

  10. Python3 指定文件夹下所有文件（包括子目录下的文件）拷贝到目标文件夹下

    #!/usr/bin/env python3 # -*- coding:utf8 -*- # @TIME :2018/9/17 9:02 # @Author:dazhan # @File :copyf ...