<!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>

　　

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

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

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

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

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

  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. 189. Rotate Array(两次反转)

    DescriptionHintsSubmissionsDiscussSolution   Pick One Rotate an array of n elements to the right by  ...

  2. Netty资料

    netty 资料  转自   http://calvin1978.blogcn.com/articles/netty-info.html Netty资料皆阵列在前 Posted on 2016-08- ...

  3. Java并发编程：并发容器之ConcurrentHashMap（转）

    本文转自:http://www.cnblogs.com/dolphin0520/p/3932905.html Java并发编程:并发容器之ConcurrentHashMap(转载) 下面这部分内容转载 ...

  4. tomcat源码调试2

    前面对tomcat做了一些简单的认识,下面将tomcat源码调试环境搭建起来. 可以参考官网的搭建方法,这里是按照网上的maven管理的方式搭建. 大概步骤是: 1.下载tomcat 9的源码,一般是 ...

  5. GZFramework错误(升级修改)日志

    sqlserver下事务中处理出现为初始化selectcommand的connection属性修改CommandDataBase中的PrepareCommand方法

  6. webapi 版本控制

    一.问题 软件开发过程中,常常会需要变更以前的接口,添加或删除接口请求字段,接口字段校验.甚至是变更请求/返回字段名称,如果强制要求所有客户端跟着一起升级代价太大.如果接口从一开始就考虑到了版本的设计 ...

  7. 在LAMP的生产环境内添加PHP的cURL扩展模块

    服务器运行一段时间后,可能突然会需求添加某个扩展,如curl.pdo.xmlrpc等, 这就需要在不重新编译 PHP   的情况下独立添加扩展. 下面以安装curl为例,介绍具体安装步骤. 1.安装c ...

  8. jqGrid('setSelection',rowid)报Cannot read property 'multiple' of undefined

    项目组非要上jeeweb框架,用jqgrid+大量iframe做为前端框架,臃肿不堪. 今天上午,在进行选定操作jqGrid('setSelection',rowid)报Cannot read pro ...

  9. saltstack之keepalived的安装配置

    使用saltstack编译安装keepalived: 创建相应的目录,并在目录下创建相应的sls配置文件 [root@node1 ~]# mkdir /srv/salt/prod/keepalived ...

  10. 20145313Java第一次实验

    实验内容 1.JVM.JRE.JDK的安装位置与区别: 2.命令行运行javac:java:javac -cp; java -cp: 3.PATH,CLASSPATH,SOURCEPATH的设定方法与 ...