黑马vue---13、事件修饰符的介绍

一、总结

一句话总结：

.stop 阻止冒泡：input type="button" value="戳他" @click.stop="btnHandler"
.prevent 阻止默认事件

1、事件修饰符 使用实例？

直接接在事件后使用：input type="button" value="戳他" @click.stop="btnHandler"

2、.stop 和 .self 的区别？

.self 只会阻止自己身上冒泡行为的触发，并不会真正阻止 冒泡的行为

二、事件修饰符的介绍

1、事件修饰符：

  • .stop 阻止冒泡

  • .prevent 阻止默认事件

  • .capture 添加事件侦听器时使用事件捕获模式

  • .self 只当事件在该元素本身（比如不是子元素）触发时触发回调

  • .once 事件只触发一次

 

2、代码

 <!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>Document</title>

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

   <style>

     .inner {

       height: 150px;

       background-color: darkcyan;

     }

     .outer {

       padding: 40px;

       background-color: red;

     }

   </style>

 </head>

 <body>

   <div id="app">

     <!-- 使用  .stop  阻止冒泡 -->

     <!-- <div class="inner" @click="div1Handler">

       <input type="button" value="戳他" @click.stop="btnHandler">

     </div> -->

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

     <!-- <a href="http://www.baidu.com" @click.prevent="linkClick">有问题，先去百度</a> -->

     <!-- 使用  .capture 实现捕获触发事件的机制 -->

     <!-- <div class="inner" @click.capture="div1Handler">

       <input type="button" value="戳他" @click="btnHandler">

     </div> -->

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

     <!-- <div class="inner" @click="div1Handler">

       <input type="button" value="戳他" @click="btnHandler">

     </div> -->

     <!-- 使用 .once 只触发一次事件处理函数 -->

     <!-- <a href="http://www.baidu.com" @click.prevent.once="linkClick">有问题，先去百度</a> -->

     <!-- 演示： .stop 和 .self 的区别 -->

     <!-- <div class="outer" @click="div2Handler">

       <div class="inner" @click="div1Handler">

         <input type="button" value="戳他" @click.stop="btnHandler">

       </div>

     </div> -->

     <!-- .self 只会阻止自己身上冒泡行为的触发，并不会真正阻止 冒泡的行为 -->

     <!-- <div class="outer" @click="div2Handler">

       <div class="inner" @click.self="div1Handler">

         <input type="button" value="戳他" @click="btnHandler">

       </div>

     </div> -->

   </div>

   <script>

     // 创建 Vue 实例，得到 ViewModel

     var vm = new Vue({

       el: '#app',

       data: {},

       methods: {

         div1Handler() {

           console.log('这是触发了 inner div 的点击事件')

         },

         btnHandler() {

           console.log('这是触发了 btn 按钮 的点击事件')

         },

         linkClick() {

           console.log('触发了连接的点击事件')

         },

         div2Handler() {

           console.log('这是触发了 outer div 的点击事件')

         }

       }

     });

   </script>

 </body>

 </html>
 

黑马vue---13、事件修饰符的介绍的更多相关文章

  1. Vue的事件修饰符

    转载于:https://www.cnblogs.com/xuqp/p/9406971.html 事件处理 如果需要在内联语句处理器中访问原生DOM事件.可以使用特殊变量$event,把它传入到meth ...

  2. 026——VUE中事件修饰符之使用$event与$prevent修饰符操作表单

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

  3. 027——VUE中事件修饰符：stop prevent self capture

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

  4. VUE中事件修饰符：stop prevent self capture

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

  5. vue中事件修饰符详解(stop, prevent, self, once, capture, passive)

    ==.stop== 是阻止冒泡行为,不让当前元素的事件继续往外触发,如阻止点击div内部事件,触发div事件 ==.prevent== 是阻止事件本身行为,如阻止超链接的点击跳转,form表单的点击提 ...

  6. 第二章 Vue快速入门--12 事件修饰符的介绍

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

  7. 028——VUE中事件修饰符once

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

  8. Vue2.0学习笔记：Vue事件修饰符的使用

    事件处理 如果需要在内联语句处理器中访问原生DOM事件.可以使用特殊变量$event,把它传入到methods中的方法中. 在Vue中,事件修饰符处理了许多DOM事件的细节,让我们不再需要花大量的时间 ...

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

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

随机推荐

  1. 1 .net中自定义事件的步骤

    1 申明一个自定义的类并且继承事件的基类 public class ClientSocketModelConnectedEvent:EventArgs { private string param; ...

  2. 链接进入react二级路由，引发的子组件二次挂载

    这个问题很怪,我两个二级路由从链接进入的时候,会挂载两次子组件. 从链接进入,是因为新页面在新标签页打开的. 有子组件是因为公共组件提取 同样的操作,有一些简单的二级路由页面,就不会挂载两次. 讲道理 ...

  3. SQL Server 2005 实现数据库同步备份 过程--结果---分析

    数据库复制:   简单来说,数据库复制就是由两台服务器,主服务器和备份服务器,主服务器修改后,备份服务器自动修改. 复制的模式有两种:推送模式和请求模式,推送模式是主服务器修改后,自动发给备份服务器, ...

  4. C++typedef struct和struct的区别

    #include "pch.h" #include struct struct1 { int a; char b; char* c; }test1;//定义结构体变量 typede ...

  5. OpenResty 执行流程阶段

    nginx有11个处理阶段,如下图所示: 指令 所处处理阶段 使用范围 解释 init_by_luainit_by_lua_file loading-config http nginx Master进 ...

  6. sql注入搞事情（连载一）

    SQL注入搞事情(连载一) 概述 写在最前面 为了有个合理的训练计划,山人准备长期开放自己的训练计划以及内容以供大家参考.山人专业是信息对抗技术,不是web方向的博客保证句句手打,如有问题请及时小窗. ...

  7. windows消息的循环机制

    首先来了解几个基本概念: 消息:在了解什么是消息先来了解什么是事件.事件可分为几种,由输入设备触发的,比如鼠标键盘等等.由窗体控件触发的,比如button控件,file菜单等.还有就是来自Window ...

  8. 4.Nginx配置文件Nginx.conf_虚拟主机配置规则

    1.Nginx配置文件及各个配置项含义 #定义Nginx运行的用户和用户组 user www www; #nginx进程数,建议设置为等于CPU总核心数. worker_processes 8; #全 ...

  9. Tunnel Warfare HDU - 1540 （线段树处理连续区间问题）

    During the War of Resistance Against Japan, tunnel warfare was carried out extensively in the vast a ...

  10. 【NOIP2012】同余方程

    原题: 求关于xx的同余方程ax≡1(mod b)的最小正整数解. 裸题 当年被这题劝退,现在老子终于学会exgcd了哈哈哈哈哈哈哈哈 ax≡1(mod b) => ax=1+by => ...