<!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. Oblect类之hashCode和equals

    1.hashCode的默认实现.显然是一个本地方法. 2.equals的默认实现.默认equals在比较两个对象时,是看他们是否指向同一个地址的.“==”操作比较的是两个变量的值是否相等,对于引用型变 ...

  2. 带宽、流量、CDN

    1.啥叫带宽? 1.1 带宽的概念: 在网络中的带宽往往是指一个固定的时间内,能通过的最大位数据,即数据传输率.带宽是一个计量单位,用来计量单位时间内传输的数据量的多少. 1.2 计量单位: 这个数据 ...

  3. hdu1403 Longest Common Substring

    地址:http://acm.split.hdu.edu.cn/showproblem.php?pid=1403 题目: Longest Common Substring Time Limit: 800 ...

  4. Java程序运行在Docker等容器环境有哪些新问题

    基本回答 一.  对于Java来说,Docker毕竟是一个较新的环境,其内存.CPU等资源限制是通过ControlGroup实现的.早期的JDK版本并不能识别这些限制,进而会导致一些基础问题. 1.如 ...

  5. 带你走进AJAX(1)

    ajax是什么? (1)ajax (asynchronouse javascript and xml) 异步的javascript 和xml (2)ajax是一个粘合剂,将javascript.xml ...

  6. Greatest Common Increasing Subsequence

    /*HDU1423 最长公共递增*/ #include <stdio.h> #include <string.h> #include <iostream> usin ...

  7. 20145329《Java程序设计》第六周学习总结

    教材学习内容总结 第十章 InputSream与OutputStream Java中,输入串流代表对象为java.io.InputStream实例,输出串流代表对象为java.io.OutputStr ...

  8. 20144303 《Java程序设计》第五周学习总结

    20144303 <Java程序设计>第五周学习总结 教材学习内容总结 第八章 异常处理 异常就是程序在运行时出现不正常情况,异常的由来是因为Java把出现的问题封装成了对象,换句话说Ja ...

  9. C++ 单词接龙

    问题描述: 拉姆刚刚开始学习英文字母,对单词排序很感兴趣,他能够迅速确定是否可以将这些单词排列在一个列表中,使得该列表中任何单词的首字母与前一个单词的尾字母相同,力能编写一个计算机程序帮助拉姆进行判断 ...

  10. 同余定理简单应用 - poj2769 - hdu 1021 - hdu 2035

    同余问题 基本定理: 若a,b,c,d是整数,m是正整数, a = b(mod m), c = d(mod m) a+c = b+c(mod m) ac = bc(mod m) ax+cy = bx+ ...