v-on
    vue中提供了v-on事件绑定
    v-on:click='函数';
    v-on可以使用@代替

vue  五个触发事件关键字
    .stop 用于阻止冒泡
    例如 div1中嵌套div2,且两个div都有点击事件,那么在点击div2时会触发div1的
    点击事件.click.stop可以阻止所有冒泡

.prevent 用于阻止默认事件,点击a标签href可以打开相应的链接,那么给事件加
    上此关键字,click.prevent

.capture 冒泡顺序
    例如 div1中嵌套div2中嵌套div3
    
        <div id="app" v-on:click="show">
            1
            <div id="app2" v-on:click.capture="show2">
                2
                <div id="app3" v-on:click="show3">
                    3
                    
                </div>
            </div>
        </div>

<script type="text/javascript">
        var vm=new Vue({
            el:"#app",
            data:{
                
            },
            methods:{
                show:function(){
                    console.log("这是app的方法")
                },
                show2:function(){
                    console.log("这是app2的方法")
                },
                show3:function(){
                    console.log("这是app3的方法")
                }
            }
        })
    </script>

此处的代码因为div2有capture关键字,所以此时冒泡的顺序发生了改变
    正常情况下:
        点击div3一层一层冒泡,先div3=》div2=》div1

使用了关键字:
        点击div3时,先div2=》div3=》div1
        1.先冒泡外层带有关键字的事件
        2.外层执行结束之后,往里层执行事件
        3.最后按照从里向外的事件开始执行
        就是说只要存在一个capture关键字,就会影响整个嵌套的执行
        例子
            div1中嵌套div2中嵌套div3.capture中嵌套div4
                此时点击div1
                先执行带有capture的div3
                然后执行div4
                最后按照从里向外的顺序执行
                顺序就是   div3=》div4=》div2=》div1

其他疑惑
            此时嵌套为
            div1中嵌套div2.capture中嵌套div3中嵌套div4
            那么可以想一下点击最里层的div4会怎么触发呢
            
            1.触发带有关键字的 div2
            2.触发点击的div4
            3.最后从里向外执行
            那么顺序为   div2=》div4=》div3=》div1

.self关键字阻止冒泡或者当点击自身才触发
        stop阻止除了自己以外所有的事件触发
        self加给想要阻止冒泡的或想要去单独点击它才触发的对象上

.onec 只触发一次,再点击无效果

vue触发事件的五个关键字的更多相关文章

  1. Vue.js之下拉列表及选中触发事件

    老早就听说了Vue.js是多么的简单.易学.好用等等,然而我只是粗略的看了下文档,简单的敲了几个例子,仅此而已. 最近由于项目的需要,系统的看了下文档,也学到了一些东西. 废话不多说,这里要说的是下拉 ...

  2. Vue自定义事件,$on(eventName) 监听事件,$emit(eventName) 触发事件

    <!--自定义事件 使用 $on(eventName) 监听事件 使用 $emit(eventName) 触发事件--> <div id="app15"> ...

  3. 在子组件中触发事件,传值给父组件-vue

    1.通过$emit触发事件 在子组件<x-test>中触发事件: <button @click="toSearchProduct()">搜索</but ...

  4. es6 Object.assign ECMAScript 6 笔记(六) ECMAScript 6 笔记(一) react入门——慕课网笔记 jquery中动态新增的元素节点无法触发事件解决办法 响应式图像 弹窗细节 微信浏览器——返回操作 Float 的那些事 Flex布局 HTML5 data-* 自定义属性 参数传递的四种形式

    es6 Object.assign   目录 一.基本用法 二.用途 1. 为对象添加属性 2. 为对象添加方法 3. 克隆对象 4. 合并多个对象 5. 为属性指定默认值 三.浏览器支持 ES6 O ...

  5. Vue基础系列(五)——Vue中的指令(中)

    写在前面的话: 文章是个人学习过程中的总结,为方便以后回头在学习. 文章中会参考官方文档和其他的一些文章,示例均为亲自编写和实践,若有写的不对的地方欢迎大家和我一起交流. VUE基础系列目录 < ...

  6. javaScript事件(五)事件类型之鼠标事件

    一.事件 二.事件流 以上内容见:javaScript事件(一)事件流 三.事件处理程序 四.IE事件处理程序 以上内容见javaScript事件(二)事件处理程序 五.事件对象 以上内容见javaS ...

  7. Vue自定义事件

    前面的话 父组件使用props传递数据给子组件,子组件怎么跟父组件通信呢?这时,Vue的自定义事件就派上用场了.本文将详细介绍Vue自定义事件 事件绑定 每个 Vue 实例都实现了事件接口 (Even ...

  8. 关于ElementUI中MessageBox弹框的取消键盘触发事件(enter,esc)关闭弹窗(执行事件)的解决方法

    好久没见了 在项目中遇到一个小小的需求,总结了一下! 详细我就不介绍了,相信大家用过的话,很了解.详见文档-----------> http://element-cn.eleme.io/#/zh ...

  9. vue click事件获取当前元素属性

    Vue可以传递$event对象 <body id="app"> <ul> <li @click="say('hello!', $event) ...

随机推荐

  1. Vs Code中炫酷写代码插件Power Mode的安装配置

    扩展栏搜索 Power Mode 安装 安装后重启vs code 文件->首选项->设置 搜索setting.json,点击在setting.json中编辑 打开之后在右侧用户设置里添加以 ...

  2. 图论--2-SAT--POJ 3905 Perfect Election

    Perfect Election Time Limit: 5000MS         Memory Limit: 65536K Total Submissions: 964         Acce ...

  3. 基于TCP的客户端和服务器端的代码设计

    实验平台 linux 实验内容 编写TCP服务器和客户端程序,程序运行时服务器等待客户端连接.一旦连接成功,服务器显示客户端的IP地址和端口号,并向客户端发送字符串 实验原理 TCP是面向连接的通信, ...

  4. SQL 文件导入数据库

    1.首先通过 xshell 连接数据库服务器,执行命令 mysql -u root -p 命令,按照提示输入密码,连接上数据库 2.在连接终端上执行命令 create database JD_Mode ...

  5. Python基础03 id

    id id(x)对应变量x所引用对象的内存地址.可以把id(x)看成变量x的身份标识. is 有时在编程中需要与变量的身份标识打交道,但不是通过 id 函数,而是 is 操作符. The operat ...

  6. B. Sorted Adjacent Differences(思维构造)

    \(给出n个数字,要求构造一个由这n个数组成的序列,使得|a_1-a_2|<=|a_2-a_3|...<=|a_{n-1}-a_n|\) \(排序后,从数列中间取个数,然后从左右分别循环取 ...

  7. Spring Cloud 学习 之 Spring Cloud Bus实现修改远程仓库后配置自动刷新

    ​ 版本号: ​ Spring Boot:2.1.3.RELEASE ​ Spring Cloud:G版 ​ 开发工具:IDEA 搭建配置中心,这里我们搭建一个简单版的就行 POM: <?xml ...

  8. 【HBase】HBase与MapReduce集成——从HDFS的文件读取数据到HBase

    目录 需求 步骤 一.创建maven工程,导入jar包 二.开发MapReduce程序 三.结果 需求 将HDFS路径 /hbase/input/user.txt 文件的内容读取并写入到HBase 表 ...

  9. 接口测试/soapUI

    忙过了2019年的下半年终于在2020年快上线了,~鞭炮噼啪过~ 项目技术架构:XML请求数据 -> JAVA (转换)-> JOSN请求数据 项目使用工具:soapUI/Jmeter,m ...

  10. ql的python学习之路-day7

    函数与函数式编程 一.编程模式分为三种: 1.面向对象编程:类----->关键字class 2.面向过程编程:过程----->关键字def,没有return 3.函数式编程:函数----- ...