黑马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. vue中ref-父主动取值值；

    多用月input标签 定义的时候 直接写ref=“id” <el-input placeholder="请输入内容" style="width: 150px&quo ...

  2. python:常用模块 知识整理

    time模块 time.time() # 时间戳:1487130156.419527 time.strftime("%Y-%m-%d %X") #格式化的时间字符串:'2017-0 ...

  3. （转）Java new一个对象的过程中发生了什么

    Java在new一个对象的时候,会先查看对象所属的类有没有被加载到内存,如果没有的话,就会先通过类的全限定名(包名+类名)来加载.加载并初始化类完成后,再进行对象的创建工作. 我们先假设是第一次使用该 ...

  4. Mysql(三)-1:存储引擎

    一 什么是存储引擎 mysql中建立的库===>文件夹 库中建立的表===>文件 现实生活中我们用来存储数据的文件有不同的类型,每种文件类型对应各自不同的处理机制:比如处理文本用txt类型 ...

  5. rsync 服务快速部署手册

    一.rsync服务端安装 1.查看rsync安装包 # rpm -qa rsync rsync-3.0.6-12.el6.x86_64 2.安装rsync 系统默认都会安装rsync软件包的,如果查看 ...

  6. C#在Oralce环境执行查询时报"Arithmetic operation resulted in an overflow"

    问题描述:C#代码在Oralce环境执行分组求和的Sql时报错,提示“Arithmetic operation resulted in an overflow”,即算术运算导致溢出 (1).执行Sql ...

  7. Linux系统组成和获取命令帮助4

    Linux文件系统:        1.文件名名称严格区分字符大小写        2.文件可以使用除/以外任意字符        3.文件名长度不能超过255字符        4.以.开头的文件为 ...

  8. Redis07-Redis单节点容量问题，twemproxy，predixy的使用

    Redis单节点容量问题 一.单节点容量问题 我们在实际场景中,往往遇上一个单节点容量问题. 1.进行业务拆分,数据分类 2.到了数据不能拆分的时候,可以进行数据分片 进行哈希取模(影响分布式下的扩展 ...

  9. webapi 可空参数

    这里上面是一个可空参数的例子.请不要写成 public WapOutgoingResponse<List<PatrolTaskOut>> GetTaskPatrolHistor ...

  10. 网络协议相关面试问题-DNS相关面试问题

    对于网络上的大部通讯都是基于TCP/IP协议的, 其中最重要的是IP协议,它是基于IP地址的,而计算机通讯只能识别IP地址,如192.168.0.1,而不能识别像咱们在浏览器敲得见名之义的" ...