.prevent 用于阻止默认事件,点击a标签href可以打开相应的链接,那么给事件加
    上此关键字,click.prevent

.capture 冒泡顺序
    例如 div1中嵌套div2中嵌套div3

<div id="app" v-on:click="show">
1
<div id="app2" v-on:click.capture="show2">
2
<div id="app3" v-on:click="show3">
3 </div>
</div>
</div> <script type="text/javascript">
var vm=new Vue({
el:"#app",
data:{ },
methods:{
show:function(){
console.log("这是app的方法")
},
show2:function(){
console.log("这是app2的方法")
},
show3:function(){
console.log("这是app3的方法")
}
}
})
</script>

此处的代码因为div2有capture关键字,所以此时冒泡的顺序发生了改变
    正常情况下:
        点击div3一层一层冒泡,先div3=》div2=》div1

    使用了关键字:
        点击div3时,先div2=》div3=》div1
        1.先冒泡外层带有关键字的事件
        2.外层执行结束之后,往里层执行事件
        3.最后按照从里向外的事件开始执行
        就是说只要存在一个capture关键字,就会影响整个嵌套的执行
        例子
            div1中嵌套div2中嵌套div3.capture中嵌套div4
                此时点击div1
                先执行带有capture的div3
                然后执行div4
                最后按照从里向外的顺序执行
                顺序就是   div3=》div4=》div2=》div1

      其他疑惑
            此时嵌套为
            div1中嵌套div2.capture中嵌套div3中嵌套div4
            那么可以想一下点击最里层的div4会怎么触发呢
            
            1.触发带有关键字的 div2
            2.触发点击的div4
            3.最后从里向外执行 
            那么顺序为   div2=》div4=》div3=》div1

Vue事件修饰符,.capture关键字详解的更多相关文章

  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. Vue事件修饰符详解

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

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

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

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

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

  6. vue事件修饰符

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

  7. vue 事件修饰符(阻止默认行为和事件冒泡)

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

  8. C#中const 和 readonly 修饰符的用法详解

    1.const是不变常量,在编译的时候就需要有确定的值,只能用于数值和字符串,或者引用类型只能为null.(这里为什么要把字符串单独拿出来?是因为字符串string是引用类型,但是使用的时候却感觉是值 ...

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

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

随机推荐

  1. 使用WIFI准备工作及配置内核——韦东山

    主要做的工作:让内核如何支持现有的无线网卡.知道这个流程就可以了,没必要深究. 使用WIFI功能时,涉及两个东西: 同样手机也可以用于WIFI AP模式,让别的设备来连接它.就是我们平时所说的用手机开 ...

  2. c语言中的数据变量类型,大小

    C中有哪些数据类型? 回答: 有两种类型的数据类型,用户定义和预定义.预定义的数据类型是int,char,float,double等,用户使用标签struct,union或enum创建用户定义的数据类 ...

  3. 第二阶段冲刺(个人)——four

    今天的的计划:选择功能界面的背景设计,使得整体效果看上去吸引眼球. 昨天做了什么?选择功能界面的选择框排版设计. 遇到的困难: 还是js的函数 设计,思路不是很清晰.

  4. lower_case_table_names=1 启动报错 mysql8.0

    我们知道在 Linux 环境下默认是区分大小写的,所以我们需要改变这种默认方式,经过网上各种搜索后,基本就是清一色的修改 lower_case_table_names,然后信誓旦旦的去修改了,但是修改 ...

  5. csv与openpyxl函数

    csv 与openpyxl函数 csv函数 常用的存储数据的方式有两种--存储成csv格式文件.存储成Excel文件(不是复制黏贴的那种) 前面,我有讲到json是特殊的字符串.其实,csv也是一种字 ...

  6. OpenResty: 反向代理

    打开文件 注:我配置的是 443  <--> 8083 以下域名根据自己的修改 请自行重启,测试.

  7. 概率论基础知识(Probability Theory)

    概率(Probability):事件发生的可能性的数值度量. 组合(Combination):从n项中选取r项的组合数,不考虑排列顺序.组合计数法则:. 排列(Permutation):从n项中选取r ...

  8. STRING Cytoscape 网络互作图

    网络图(Network)看似复杂,其实构成非常简单,网络图是一种图解模型,形状如同网络,故称网络图,由节点(node)和连线(edge)两个因素组成的.其中 node 又分为 source node( ...

  9. C语言-memset()

    1. memset()函数原型是extern void *memset(void *buffer, int c, int count)        buffer:为指针或是数组, c:是赋给buff ...

  10. Linux安装vim,解决vim: command not found

    1,输入rpm -qa|grep vim 命令, 如果 vim 已经正确安裝,会返回下面的三行代码: root@server1 [~]# rpm -qa|grep vim vim-enhanced-7 ...