转

<!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 关键字的更多相关文章

  1. 1 vue 关键字解释

    1 每一个计算属性都包含一个getter和一个setter,计算属性可以依赖其他计算属性,计算属性可以依赖当前vue实例的数据也可以依赖其他vue实例的数据 2 计算属性是基于它的依赖缓存的,方法则是 ...

  2. Vue 点击事件怎么传递 this ？

    Part.1 问题 如何使上面的三个按钮单个点击后实现第一个按钮现在的样式呢? Part.2 思路 为当前点击的按钮添加一个 单独的类名,我的做法: .active { background: #3C ...

  3. Github发现优秀的开源项目

    先上个大logo,哈哈. github上有非常多的资源,我们可以在github上搜索到非常多的开源项目.那么如何使用github查找资源? 罗列出一下几种方式. 1.Explore 登录GitHub, ...

  4. 作为一个新手的Oracle（DBA）学习笔记【转】

    一.Oracle的使用 1).启动 *DQL:数据查询语言 *DML:数据操作语言 *DDL:数据定义语言 DCL:数据控制语言 TPL:事务处理语言 CCL:指针控制语言 1.登录 Win+R—cm ...

  5. Vue实现添加、删除、关键字查询

    从今天开始,将不定期更新关于 Vue 的学习以及各种方法的使用,好了,下面就开始吧 Vue的实例创建首先需要我们引入一个vue.js(也可以在本地npm安装vue,我为了省事就...),然后在HTML ...

  6. Vue 实现分页+输入框关键字筛选

    分页的实现(Vue+Element)+输入框关键字筛选 1.这里用的是Element 自带的分页组件 <template> <div class="sales-table& ...

  7. Vue事件修饰符，.capture关键字详解

    .prevent 用于阻止默认事件,点击a标签href可以打开相应的链接,那么给事件加    上此关键字,click.prevent .capture 冒泡顺序    例如 div1中嵌套div2中嵌 ...

  8. vue中添加与删除，关键字搜索

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

  9. 第二章 Vue快速入门-- 23 品牌案例-根据关键字实现数组的过滤

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

随机推荐

  1. 关于LinearLayout设置权重后width或height不设置0dp的影响说明

    摘要 平时没那么注意LinearLayout布局时权重的问题,设置了权重属性后,通常建议将width或height的属性值设置为0dp,有时候设置权重后,还是习惯将width或height的属性设置为 ...

  2. JavaScript 后台获取数据 - HTTP203 Advent(中文字幕)

    如果关注过 Google 相关的开发技术,对 HTTP203 这个栏目应该不陌生. 这是 HTTP203 圣诞节的特别版! Jake(@jaffathecake)和 Surma(@DasSurma)有 ...

  3. 将不确定变成确定~LINQ DBML模型可以对应多个数据库吗

    答案是肯定的,一个DBML模型可以对应多个数据库,只要数据库中的表与模型中定义的表结构完成相同,就可以这个技术,我们可以用来开发一些通用的功能模块,如通过后台管理模块,我们将一些通用表进行抽象,如,对 ...

  4. Effective C++学习记录

    Effective C++算是看完了,但是并没有完全理解,也做不到记住所有,在此记录下55个条款及条款末的"请记住". 让自己习惯C++ 条款01:视C++为一个语言联邦 ① C ...

  5. 《C程序设计语言》 练习1-23

    问题描述 编写一个删除C语言程序中所有的注释语句.要正确处理带引号的字符串与字符常量.在C语言中,注释不允许嵌套. Write a program to remove all comments fro ...

  6. 简单搜索 kuangbin C D

    C - Catch That Cow POJ - 3278 我心态崩了,现在来回顾很早之前写的简单搜索,好难啊,我怎么写不出来. 我开始把这个写成了dfs,还写搓了... 慢慢来吧. 这个题目很明显是 ...

  7. Java 常用API（一）

    目录 Java 常用API(一) 1. Scanner类 引用类型的一般使用步骤 Scanner的使用步骤 例题 2. 匿名对象 概述 匿名对象作为方法的参数 匿名对象作为方法的返回值 3. Rand ...

  8. maven基本配置

    1.maven 是一个项目构建工具,如果在公司做大的项目 ,需要把项目拆分成很多子项目,为了方便各子项目之间协同开发和调试,一般都会使用maven.使用maven和以前web项目最大的不同是jar包的 ...

  9. spring学习笔记（六）自定义spring-boot-starter（2）

    上篇文章我们主要讲了spring自动装配的原理,我们知道了springboot在启动的时候会自动去读.factories文件,在factories文件中,autoConfiguration对应的就是我 ...

  10. 测试开发专题:spring-boot统一异常捕获

    java异常介绍 异常时相对于return的一种退出机制,可以由系统触发,也可由程序通过throw语句触发,异常可以通过try/catch语句进行捕获并处理,如果没有捕获,则会导致程序退出并输出异常栈 ...