转

<!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. nginx经验分享

    如果我们在使用启动nginx时,遇到这样的提示: nginx: [alert] could not open error log file: open() "/usr/local/var/l ...

  2. pycharm（py 文件中添加作者、时间）

    1.打开 Pycharm,点击 File,再找到 Settings... 2.选择 Editor ----> File and Code Templates ----> Python Sc ...

  3. 一只简单的网络爬虫（基于linux C/C++）————利用正则表达式解析页面

    我们向一个HTTP的服务器发送HTTP的请求后,服务器会返回可能一个HTML页面(当然也可以是其他的资源),我们可以利用返回的HTML页面,在其中寻找其他的Url,例如我们可以这样在浏览器上查看一下H ...

  4. muduo网络库源码学习————互斥锁

    muduo源码的互斥锁源码位于muduo/base,Mutex.h,进行了两个类的封装,在实际的使用中更常使用MutexLockGuard类,因为该类可以在析构函数中自动解锁,避免了某些情况忘记解锁. ...

  5. C. Game with Chips(陷阱暴力题)

    \(为什么说这是个陷阱呢??\) \(因为不管你脑洞多大,数学多好,都发现会束手无策\) \(每移动一次不知道往哪个方向,不知道先访问哪个点,同时要记录所有点的坐标,记录每个点是否访问过目标点.... ...

  6. inode block 软硬链接

    inode block 软硬链接 1 inode 1.1 inode(索引节点)作用 (1)用于存储文件数据属性信息(2)用于存储数据指针信息 1.2 如何产生 格式化时,创建文件系统 1.3 如何查 ...

  7. matlab 提示 Continuous sample time is not supported by discrete derivative 错误的解决办法

    Simulink仿真的时候,出行错误提示:Continuous sample time is not supported by discrete derivative 中文意思是:连续采样时间不支持离 ...

  8. Kubernetes笔记（三）：Gitlab+Jenkins Pipeline+Docker+k8s+Helm自动化部署实践（干货分享！）

    通过前面两篇文章,我们已经有了一个"嗷嗷待哺"的K8s集群环境,也对相关的概念与组件有了一个基本了解(前期对概念有个印象即可,因为只有实践了才能对其有深入理解,所谓"纸上 ...

  9. JS插件：fullCalendar图解

    1.首先看下效果: 官网下载链接 https://fullcalendar.io/download .官方效果图:https://fullcalendar.io/ 2.准备工作,引入对应的 css和 ...

  10. python --设置Python3 设置为机器默认

    echo alias python=python3 >> ~/.bashrc source ~/.bashrc 反之,如果仍然需要Python2.7 ,则改成2.7就行. update : ...