当前位置: 首页 > article >正文

第十二课 Vue中的事件修饰符

Vue中的事件修饰符

事件修饰符的使用场景较多,主要为了处理事件冒泡和默认事件等所带来的一系列问题

事件修饰符

1)阻止默认事件

    <div id="app">
            <a href="/" v-on:click.prevent="fun()">点击我弹出弹窗</a>
    </div>
    <script>
        new Vue({
            el: '#app',
            methods: {
                fun(){
                    alert('Hello World !');
                }
            }
        })
    </script>  

2)阻止冒泡

        <style>
        .per{
            width: 200px;
            height: 200px;
            border: 2px solid #000;
        }

        .son{
            width: 100px;
            height: 100px;
            background: red;
        }
        </style>
        <div id="app">
                <div class="per" @click="per()">
                    <div class="son" @click.stop="son()"></div>
                </div>
        </div>
        <script>
            new Vue({
                el: '#app',
                methods: {
                    per(){
                        alert('This is per!');
                    },
                    son(){
                        alert('This is son!');
                    }                    
                }
            })
        </script>  

3)链式调用

        <style>
        .per{
            width: 200px;
            height: 200px;
            border: 2px solid #000;
        }

        .son{
            width: 100px;
            height: 100px;
            background: red;
            display: block;
        }
        </style>
        <div id="app">
                <div class="per" @click="per()">
                    <a class="son" href="/" @click.prevent.stop="son()"></a>
                </div>
        </div>
        <script>
            new Vue({
                el: '#app',
                methods: {
                    per(){
                        alert('This is per!');
                    },
                    son(){
                        alert('This is son!');
                    }                    
                }
            })
        </script>  

4)事件捕获模式

        <style>
        .per{
            width: 200px;
            height: 200px;
            border: 2px solid #000;
        }

        .son{
            width: 100px;
            height: 100px;
            background: red;
        }
        </style>
        <div id="app">
                <div class="per" @click="per()">
                    <div class="son" @click.capture="son()"></div>
                </div>
        </div>
        <script>
            new Vue({
                el: '#app',
                methods: {
                    per(){
                        alert('This is per!');
                    },
                    son(){
                        alert('This is son!');
                    }                    
                }
            })
        </script>  
  1. 其他不常用事件修饰符

a)self
b)once


http://www.kler.cn/a/372833.html

相关文章:

  • Unity性能优化4【内存实战篇】
  • 使用Python和Parsel库爬取CSDN博客文章专栏并生成Markdown链接列表的导航
  • git快速合并代码dev->master
  • 重学SpringBoot3-Spring WebFlux之HttpHandler和HttpServer
  • 一些有用的科研数据网站
  • OpenCV基本操作(python开发)——(7)实现图像校正
  • ubuntu系统docker容器中的torch,使用宿主机的gpu
  • 如何将原本打开Edge呈现出的360浏览器,更换成原本的Edge页面或者百度等其他页面
  • JavaFX WebView + Vue初始化加载数据解决方案
  • 基于javaweb的流浪宠物管理系统的设计与实现源码(springboot)
  • 大数据-197 数据挖掘 机器学习理论 - scikit-learn 泛化能力 交叉验证
  • 视频设备一体化监控运维方案
  • openGauss开源数据库实战十四
  • Flink难点和高频考点:Flink的反压产生原因、排查思路、优化措施和监控方法
  • 性能测试——Jmeter实战
  • DAIN-SQL,DAIL-SQL,C3-SQL和 DIN-SQL 技术的理解和异同点
  • LSTM——长短期记忆神经网络
  • Linux 调度SCHED_FIFO或SCHED_RR
  • 传统机器学习总结
  • 目标检测一阶段模型
  • BERT的中文问答系统22
  • rook-ceph mon 报错 e9 handle_auth_request failed to assign global_id
  • 时尚零售企业商品计划管理的数字化之旅
  • 「C/C++」C++设计模式 之 抽象工厂模式(Abstract Factory)
  • HTTP相关返回值异常原因分析,第二部分
  • Mac在Typora配置PicGo图床,以github为例