转

<!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. dlopen failed: empty/missing DT_HASH in "libx.so" (built with --hash-style=gnu?)

    崩溃日志内容: java.lang.UnsatisfiedLinkError: dlopen failed: empty/missing DT_HASH in "libxxxx.so&quo ...

  2. 你所不知道的Python | 字符串连接的秘密

    字符串连接,就是将2个或以上的字符串合并成一个,看上去连接字符串是一个非常基础的小问题,但是在Python中,我们可以用多种方式实现字符串的连接,稍有不慎就有可能因为选择不当而给程序带来性能损失. 方 ...

  3. Everything 本地磁盘文件搜索工具下载！

    如何运用布尔算子? AND(且)是缺省使用的布尔算子. 例如:如果要搜索 foo 和 bar 同时出现的文件:foo bar 如果从两者之中任一个都可以,则用 | 介于两者之间. 例如:如果要搜索.j ...

  4. Vector shrink 请求容器降低其容量和size匹配 shrink_to_fit();

    一.先从size 和capacity 说起 resize(),设置大小(size); reserve(),设置容量(capacity); size()是分配容器的内存大小,而capacity()只是设 ...

  5. Python（Redis 中 Set/Zset 类型数据和其他操作）

    1.redis 基本操作命令 Set 操作 Set 集合就是不允许重复的列表 无序集合 sadd(name,values) 给 name 对应的集合中添加 1 个或多个元素 import redis ...

  6. web安全笔记

    判断网站是否伪静态 把.html后缀即可或者加.php?id=99 例子:33_99.html   去掉.html和_变成33.php?id=99 即可判断是否伪静态 判断网站是否在win或者linu ...

  7. IoTClient开发6 - S7-200SmarTcp协议客户端实现

    环境和工具 服务端电脑IP:192.168.1.130 客户端电脑IP:192.168.1.120 1.在服务端电脑运行IoTClientTool 2.运行Wireshark 3.在客户端电脑运行Io ...

  8. 深入理解CSS定位

    CSS中有3种定位机制:普通流,浮动和绝对定位.除非专门指定,否则所有框都在普通流中定位.顾名思义,普通流中元素框的位置由HTML元素的位置决定.块级框一个接一个地垂直排列,框之间的垂直距离由框的垂直 ...

  9. 万盛酒店餐饮管理系统（SpringBoot，SSM，MySQL ）

    项目源码获取地址: 链接:https://pan.baidu.com/s/1ip0keQruE2crA8vm1n8ZXQ 提取码:kivb 复制这段内容后打开百度网盘手机App,操作更方便哦 [功能包 ...

  10. 你的团队需要一个正确的程序集(dll)管理姿势

    很多团队经历时间的积淀之后,都会有很多的可重用的公共技术组件.大部分的团队都会把这些公共组件生成程序集(dll)后,放到GIT或SVN的一个公共目录里面,以供各个项目中使用.起初在项目很少又或者是公共 ...