开发者社区> 流楚丶格念> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

Vue指令之事件修饰符

简介: Vue指令之事件修饰符
+关注继续查看

Vue指令事件修饰符


事件修饰符


  • .stop 阻止冒泡


  • .prevent 阻止默认事件


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


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


  • .once 事件只触发一次


事件修饰符使用案例

image

<!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;
    }
    .inner input {
      height: 100px;
      font-size: 50px;
    }
    .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="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>

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
旋翼受损还能正常飞行?在无人机上并置摄像头,这种图像算法还能保证指令“无损”
旋翼受损还能正常飞行?在无人机上并置摄像头,这种图像算法还能保证指令“无损”
95 0
数据收集系统(DCS)
本文研究全球及中国市场数据收集系统(DCS)现状及未来发展趋势,侧重分析全球及中国市场的主要企业,同时对比北美、欧洲、中国、日本、东南亚和印度等地区的现状及未来发展趋势
50 0
浅析数据湖与数据仓库
基于信息化的飞速发展,数据已经成为21世纪的一种潜在能源。我们可以利用大数据,人工智能等相关技术,科学的管理数据,进行数据分析,挖掘出数据的潜在价值,让数据转化为生产力的原料,生生不息。
35 0
+关注
流楚丶格念
csdn平台优质创作者,51cto TOP博主,360图书馆科技博主,燕山大学目前大三在读,日拱一卒,功不唐捐,加油!!!
1010
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载