<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>事件修饰符</title>

    <script src="../lib/vue.js"></script>

    <style>

        .app{

            width: 200px;

            height: 200px;

            background: red;

        }

    </style>

</head>

<body>

    <!-- <div class="app" @click.capture="outClick"> -->

        <!-- 使用.capture实现捕获触发事件的机制，即从外部事件开始执行 -->

    <div class="app" @click.self="outClick">

        <!-- 使用.self实现只有点击当前元素才会触发事件处理函数-->

        <input type="button" value="按钮1" @click.stop="innerClick">

        <!-- 使用.stop阻止事件的冒泡行为 -->

        <input type="button" value="按钮2" @click.once="innerClick">

        <!-- 使用.once实现事件的触发次数为一次 -->

        <a href="https://www.baidu.com/" @click.prevent.stop="aClick">有事找百度</a>

        <!-- 使用.prevent阻止事件的默认行为 -->

    </div>

    <script>

        var vm = new Vue({

            el:".app",

            methods:{

                outClick(){

                    alert('我是外面的事件');

                },

                innerClick(){

                    alert('我是内部的事件');

                },

                aClick(){

                    alert('我是超链接的事件');

                }

            }

        })

    </script>

</body>

</html>

33、vue中的事件修饰符.stop、.prevent、.self、.capture、.once的更多相关文章

  1. vue中的事件修饰符

    vue提倡的是在方法中只有对数据的处理,所以提供了事件修饰符用于DOM的事件处理,常用的事件修饰符有以下几个: (1). stop:阻止冒泡(通俗讲就是阻止事件向上级DOM元素传递) 点击内层div的 ...

  2. 怎样在 Vue 中使用 事件修饰符 ?

    Vue 中可以通过 v-on 来绑定事件监听函数, 不过事件会有许多额外情况, 比如 是否阻止冒泡 / 是否阻止重载 / 是否限制点击次数 / 是否可以通过按键触发 等等. 这时就需要使用到 事件修饰 ...

  3. vue学习(六) 事件修饰符 stop prevent capture self once

    //html <div id="app"> <div @click="divHandler" style="height:150px ...

  4. （二）咋使用VUE中的事件修饰符

    1,stop修饰符:阻止事件冒泡 首先我们要明确H5的事件是从内向外进行冒泡的,写一个简单的DEMO 当我们点击按钮时,事件从内向外冒泡,依次触发绑定的事件,控制台信息如下 现在我们在click后面添 ...

  5. vue中的.passive修饰符

    一.passive作用 详情请参考MDN(https://developer.mozilla.org/zh-CN/docs/Web/API/EventTarget/addEventListener)中 ...

  6. [vue]vue v-on事件绑定(原生修饰符+vue自带事件修饰符)

    preventDefault阻止默认行为和stopPropagation终止传递 event.preventDefault() 链接本来点了可以跳转, 如果注册preventDefault事件,则点了 ...

  7. vue指令与事件修饰符

    一.条件渲染指令 vue中提供了两个指令可以用于判断是否要显示元素,分别是v-if和v-show. 实例: <!DOCTYPE html> <html lang="en&q ...

  8. Vue指令之事件修饰符

    事件修饰符: + .stop 阻止冒泡 + .prevent 阻止默认事件 + .capture 添加事件侦听器时使用事件捕获模式 + .self 只当事件在该元素本身(比如不是子元素)触发时触发回调 ...

  9. vue中的.native修饰符

    如果你想在某个组件的根元素上绑定事件,直接使用 @click=''function' 是不生效的,我们可以添加.native修饰符 @click.native=''function'',请看以下dem ...

随机推荐

  1. nginx 其他配置语法

    1.nginx 缓冲区配置 2.跳转重定向 3.头信息 4.超时 location / { proxy_pass http://127.0.0.1:8080;(代理跳转url) proxy_redir ...

  2. python基础语法19 面向对象总结，pickle保存对象注意事项

    面向对象的三大特性: 继承,封装,多态 多态的三种表现形式:鸭子类型,继承父类,继承抽象类 pickle保存对象注意事项 class Foo: y = 20 def __new__(cls, *arg ...

  3. selenium数据读取模块

    例如 数据保存在txt中 def info(path): web_info={} config = open(path) for line in config: result = [ele.strip ...

  4. OpenCV 学习笔记（15）openc解帧视频

    1 修改读取视频的地址 2 修改保存图片序列的路径 String videopath = "F:/dongdong/0tool/3D/2模型/相机阵列/1_12cam亿级相机/数据/giga ...

  5. 拷贝插件 copy-webpack-plugin

    用于拷贝文件或目录到输出目录中 https://blog.csdn.net/weixin_41643133/article/details/95489335 https://www.jianshu.c ...

  6. 3-OpenResty 配置PHP

    由于咱以前是用PHP做的东西,又不想重新用 OpenResty自带的编写,所以呢咱设置下,可以像以前Apache那样访问PHP文件 首先去下载 PHP https://windows.php.net/ ...

  7. LOJ6115 汇合 树上分块

    本题空间很小,那些O(nlogn)的树上lca算法在这里不顶用了,可以考虑树分块. 本题的树分块是基于深度的,即按深度每\(\sqrt n\)分一块,然后一块一块往上跳,一直跳到lca处. 对于这题, ...

  8. vb.net 读取 excel

    Dim myConn AsNew ADODB.Connection myConn.CursorLocation = ADODB.CursorLocationEnum.adUseClient '   用 ...

  9. vue中使用element-ui自定义主题后，vue-cli跑不起来了

    环境:vue-cli 2.x版本 自己在官网配置了主题并放到了项目中https://element.eleme.cn/#/zh-CN/theme 然后,我的脚手架在我的电脑中休息了几天,就跑不通了呢! ...

  10. UA记录

    安卓QQ内置浏览器UA: Mozilla/5.0 (Linux; Android 5.0; SM-N9100 Build/LRX21V) AppleWebKit/537.36 (KHTML, like ...