黑马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. Rsyslog服务器的安装与配置

    一.Rsyslog服务器的安装与配置 1.清空iptabels, 关闭selinux避免安装过中报错 清空iptables iptables -F service iptables save 关闭se ...

  2. mysql之使用json

    从mysql 5.7开始才有 创建表(含有json类型) CREATE TABLE `emp_details` ( `emp_no` int(11) NOT NULL, `details` json ...

  3. OPNsense防火墙搭建实验环境，MSF与SSH进行流量转发

    OPNsense防火墙搭建实验环境,MSF与SSH进行流量转发 摘要: 记录实验过程中踩到的坑.介绍OPNsense防火墙的安装配置并搭建实验环境,利用msf的模块及ssh进行流量转发(LAN向DMZ ...

  4. 给Eclipse安装MinGW

    @2019-06-30 [小记] 安装完Eclipse后Toolchains只有Cross GCC,下载安装MinGW后添加系统环境变量即可

  5. python 示例代码5

    示例5:用户输入和格式化输出2(用户输入demo1)

  6. 由函数$y=\sin x$的图像伸缩变换为函数$y=\sin(\omega x)$的图像(交互式)

    可以拖动滑动条\(\omega\)显示动态效果

  7. python 文件操作的相对路径和绝对路径(windows)

    1.相对路径 windows  '.\'表示当前路径 with open(r'.\db\123.txt','w',encoding='utf-8') as f: f.write('abc') 2.绝对 ...

  8. mysql解除锁表

    查看下在锁的事务 :SELECT * FROM INFORMATION_SCHEMA.INNODB_TRX; 杀死进程id(就是上面命令的trx_mysql_thread_id列):kill 线程ID

  9. BZOJ 2152 / Luogu P2634 [国家集训队]聪聪可可 (点分治/树形DP)

    题意 一棵树,给定边权,求满足两点之间的路径上权值和为3的倍数的点对数量. 分析 点分治板题,对每个重心求子树下面的到根的距离模3分别为0,1,2的点的个数就行了. O(3nlogn)O(3nlogn ...

  10. 浅谈Spring @Order注解的使用（转）

    注解@Order或者接口Ordered的作用是定义Spring IOC容器中Bean的执行顺序的优先级,而不是定义Bean的加载顺序,Bean的加载顺序不受@Order或Ordered接口的影响: 1 ...