黑马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. JVM垃圾回收那些事

    Java这种VM类跨平台语言比起C++这种传统编译型语言很大的区别之一在于引入了垃圾自动回收机制.自动垃圾回收大大提高了Java程序员的开发效率并且极大地减少了犯错的概率,但终归而言由于无法像C++程 ...

  2. layDate面板出现红色花纹图案

    要使用layDate,有两种方法: 1. 要么在引用layui.js和layui.css,然后通过layui.use('laydate', callback) 加载模块后,调用方法使用. 2. 去la ...

  3. linux网络协议栈(四)链路层 vlan处理

    转:http://blog.csdn.net/u010246947/article/details/18224517 4.6.VLAN处理: 4.6.1.vlan原理 对于带vlan的以太网报文,其以 ...

  4. hive--构建于hadoop之上、让你像写SQL一样编写MapReduce程序

    hive介绍 什么是hive? hive:由Facebook开源用于解决海量结构化日志的数据统计 hive是基于hadoop的一个数据仓库工具,可以将结构化的数据映射为数据库的一张表,并提供类SQL查 ...

  5. Toast的基本用法 吐司打印

    //Toast.makeText(上下文,内容,显示时间);Toast toast =Toast.makeText(this,"位置="+position+"内容=&qu ...

  6. linux常用查看命令

    一般查看 cat -n 文件名 n 代表显示行号 分页查看 more 文件名 more -50 文件名 -50 代表一页显示50行 向下翻页  空格 向上翻页 b more +/搜索值 文件名 查找文 ...

  7. MyBatis 分页插件PageHelper 后台报错

    今天遇到一个问题,使用MyBatis 分页插件PageHelper 进行排序分页后,能正常返回正确的结果,但后台却一直在报错 net.sf.jsqlparser.parser.ParseExcepti ...

  8. 小程序wx.showToast()方法实现文字换行

    小程序wx.showToast()方法实现文字换行 在文字中间加上  '\r\n' 真机中生效 wx.showToast({ title: `换行前内容\r\n换行后内容`, icon: 'none' ...

  9. 虚拟机vmware的连接方式以及IP端口，协议等概念

    1.NAT虚拟机相当于小弟,宿主机相当于大哥,宿主机虚拟出一个网段供虚拟机上网用 2.Bridge桥接,虚拟机和宿主机相当于局域网中的两台机器 3.Host-Only虚拟机只和宿主机通信,无法上网 3 ...

  10. BZOJ 2243: [SDOI2011]染色 (树剖+线段树)

    树链剖分后两个区间合并的时候就判一下相交颜色是否相同来算颜色段数就行了. CODE #include <vector> #include <queue> #include &l ...