<!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. Vue的响应式系统

    Vue的响应式系统 我们第一次使用Vue的时候,会感觉有些神奇,举个例子: <div id="app"> <div>价格:¥{{price}}</di ...

  2. PHPstorm不停Indexing最新解决办法

    PHPstorm不停Indexing最新解决办法   1.网络上千篇一律的解决办法 File -> Invalidate Caches / Restart... -> Invalidate ...

  3. Greenplum 添加mirror步骤

    原文链接:https://yq.aliyun.com/articles/695864 [TOC] 概述 新安装的greenplum集群只有primary节点,没有mirror.高可用性没得到保证.所以 ...

  4. S1_搭建分布式OpenStack集群_02 虚拟机环境配置

    一.配置主机名及hosts和防火墙(只演示一台,其他机器配置方式一样)vim /etc/hosts  加入    10.10.11.11 controller10.10.11.12 compute11 ...

  5. 如何在Processing中调用Windows应用程序

    Processing调用了exe就意味着失去了跨平台.调用的过程是,先得到当前的runtime,然后调用runtime的exec()方法,在exec()传入的是字符串参数,这个参数很重要,该有空格的地 ...

  6. fgets()函数

    声明: char *fgets(char *str,int n,FILE* stream) 参数: str—这是指向一个字符数组的指针,该数组存储了要读取的字符串 n – 这是要读取的最大字符数(包括 ...

  7. 《挑战30天C++入门极限》c++中指针学习的两个绝好例子

        c/c++中指针学习的两个绝好例子 对于众多人提出的c/c++中指针难学的问题做个总结: 指针学习不好关键是概念不清造成的,说的简单点就是书没有认真看,指针的学习犹如人在学习饶口令不多看多学多 ...

  8. windows下powershell的包管理工具

    scoop github 开源地址:https://github.com/lukesampson/scoop 安装命令->powershell管理员模式下输入 Invoke-Expression ...

  9. pve 导入 ova

    匆忙记录 Proxmox includes qm importdisk as command. Extract your ova: tar -xvf *.ova Create a new VM wit ...

  10. (大型网站之Nginx)图解正向代理、反向代理、透明代理

    一.正向代理(Forward Proxy) 一般情况下,如果没有特别说明,代理技术默认说的是正向代理技术.关于正向代理的概念如下: 正向代理(forward)是一个位于客户端[用户A]和原始服务器(o ...