<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>修饰符：self capture stop prevent的使用</title>
    <script type="text/javascript" src="vue.js"></script>
</head>
<body>
<div id="demo">
    <!--第一种情况-->
    <!--<div @click="divEven" style="border:1px #188eee solid;">-->
        <!--<a href="www.baidu.com" @click="aEven">百度链接</a>-->
    <!--</div>-->
    <!--stop的使用：阻止事件冒泡的发生-->
    <!--<div @click="divEven" style="border:1px #188eee solid;">-->
        <!--<a href="www.baidu.com" @click.stop="aEven">百度链接</a>-->
    <!--</div>-->
 
    <!--prevent的使用：阻止默认事件的发生-->
    <!--<div @click="divEven" style="border:1px #188eee solid;">-->
        <!--<a href="www.baidu.com" @click.stop.prevent="aEven">百度链接</a>-->
    <!--</div>-->
 
    <!--self的使用：只有点击他本身时才去执行，点击他的子元素不去执行-->
    <!--<div @click.self="divEven" style="border:1px #188eee solid;">-->
        <!--<a href="www.baidu.com" @click.prevent="aEven">百度链接</a>-->
    <!--</div>-->
 
    <!--capture的使用：触发捕获事件()先执行大盒子的事件，起执行小盒子的事件-->
    <div @click.capture="divEven" style="border:1px #188eee solid;">
        <a href="www.baidu.com" @click.prevent="aEven">百度链接</a>
    </div>
</div>
<script>
    new Vue({
        el:"#demo",
        methods:{
            divEven(){
                alert("我是div的事件");
            },
            aEven(){
                alert("我是a链接事件");
            }
        }
    });
</script>
</body>
</html>

VUE中事件修饰符：stop prevent self capture的更多相关文章

  1. 026——VUE中事件修饰符之使用$event与$prevent修饰符操作表单

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

  2. 027——VUE中事件修饰符：stop prevent self capture

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

  3. vue中事件修饰符详解(stop, prevent, self, once, capture, passive)

    ==.stop== 是阻止冒泡行为,不让当前元素的事件继续往外触发,如阻止点击div内部事件,触发div事件 ==.prevent== 是阻止事件本身行为,如阻止超链接的点击跳转,form表单的点击提 ...

  4. 028——VUE中事件修饰符once

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

  5. vue中的修饰符

    Vue2.0学习笔记:Vue事件修饰符的使用   事件处理 如果需要在内联语句处理器中访问原生DOM事件.可以使用特殊变量$event,把它传入到methods中的方法中. 在Vue中,事件修饰符处理 ...

  6. Vue的事件修饰符

    转载于:https://www.cnblogs.com/xuqp/p/9406971.html 事件处理 如果需要在内联语句处理器中访问原生DOM事件.可以使用特殊变量$event,把它传入到meth ...

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

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

  8. vue中.sync修饰符，实现子组件实时更新父组件的值

    vue 修饰符sync的功能是:当一个子组件改变了一个 prop 的值时,这个变化也会同步到父组件中所绑定. 不过它有一个前身,先来看看.sync出现之前是如何实现的 父组件中(传递给子组件一个值:p ...

  9. vue中.sync 修饰符

    一直以来,都不太明白.sync的用法,归根结底原因在于,没有仔细阅读“.sync修饰符”. 正好,最近在拿一个项目练手,然后使用了elment-ui,然后在用到dialog的时候,属性visible是 ...

随机推荐

  1. Kafka ISR and AR HW 、 LEO

    相信大家已经对 kafka 的基本概念已经有一定的了解了,下面直接来分析一下 ISR 和 AR 的概念. 0|1ISR and AR 简单来说,分区中的所有副本统称为 AR (Assigned Rep ...

  2. TPC-H 测试参考

    https://github.com/digoal/pg_tpch  ---明天以此为准 https://www.jianshu.com/p/83e670cf3ffb https://yq.aliyu ...

  3. (尚008)Vue条件渲染

    1.test008.html <!DOCTYPE html><html lang="en"><head> <meta charset=&q ...

  4. pt

    https://www.hdarea.co/torrents.php http://hdhome.org/torrents.php https://ourbits.club/torrents.php ...

  5. 洛谷 P1083 借教室 题解

    P1083 借教室 题目描述 在大学期间,经常需要租借教室.大到院系举办活动,小到学习小组自习讨论,都需要向学校申请借教室.教室的大小功能不同,借教室人的身份不同,借教室的手续也不一样. 面对海量租借 ...

  6. 洛谷P2312解方程题解

    题目 暴力能得\(30\),正解需要其他的算法操作,算法操作就是用秦九韶算法来优化. 秦九韶算法就是求多项式的值时,首先计算最内层括号内一次多项式的值,然后由内向外逐层计算一次多项式的值,然后就将求\ ...

  7. vue-cli3配置多页面入口

    假如要单独将登陆页面当成一个项目入口文件: 第一步:创建一个登陆页面的文件 在项目public文件夹下创建一个login.html,其实就是将index.html复制一份,将title改一下: 第二步 ...

  8. Note_4.1

    2019/4/1 奇奇怪怪的笔记 多项式除法 问题描述 给定\(n\)次多项式\(A(x)\)和\(m\)次多项式\(B(x)\) 求: \[ A(x)=B(x)*C(x)+R(x) \] 我们要求\ ...

  9. webpack-merge使用说明

    webpack-merge   配置分离 随着我们业务逻辑的增多,图片.字体.css.ES6以及CSS预处理器和后处理器逐渐的加入到我们的项目中来,进而导致配置文件的增多,使得配置文件书写起来比较繁琐 ...

  10. linux rand application

    code: #include <stdio.h> #include <stdlib.h> #include <time.h> #define random_1(a, ...