• vue-事件修饰符

    1）默认行为和阻止默认行为

    1. <body>
    2.  
    3.     <div id="root">
    4.       <h2>欢迎来到{{name}}学习</h2>
    5.       <!-- <button v-on:click="showInfo">点我提示信息</button>  -->
    6.       <a href="https:www.baidu.com" @click="showInfo">点我提示信息</a>
    7.  
    8.     </div>
    9.     <script type="text/javascript">
    10.         Vue.config.productionTip = false //阻止vue在启动时提示
    11.  
    12.       
    13.         const vm =  new Vue({
    14.         el:'#root',
    15.         data:{
    16.         name:'爪哇开发'
    17.         },
    18.         methods: {
    19.         showInfo(event){
    20.             alert('同学你好')
    21.         }
    22.     }
    23.  
    24.         })
    25.         
    26.     </script>
    27.     
    28. </body>

    打开之后效果如下：

     大家可以发现，在点击了showInfo事件并且确定之后，页面自动跳转到超链接了。这是一个默认事件。那么如何阻止这个默认行为呢？可以将时间改成如下形式。这样就不会跳转了。

     以上就演示了默认行为和阻止事件默认行为

    2）事件冒泡和阻止事件冒泡

    1. <style>
    2.         *{
    3.             margin-top: 20px;
    4.         }
    5.         .demo1{
    6.             height: 50px;
    7.             background-color: skyblue;
    8.         }
    9.     </style>
    10. </head>
    11. <body>
    12.  
    13.     <div id="root">
    14.       <h2>欢迎来到{{name}}学习</h2>
    15.       <!-- 阻止默认事件 （常用） -->
    16.       <a href="https:www.baidu.com" @click.prevent="showInfo">点我提示信息</a>
    17.       <div class="demo1" @click="showInfo">
    18.         <button @click="showInfo">点我提示信息</button>
    19.       </div>
    20.  
    21.     </div>
    22.     <script type="text/javascript">
    23.         Vue.config.productionTip = false //阻止vue在启动时提示
    24.  
    25.       
    26.         const vm =  new Vue({
    27.         el:'#root',
    28.         data:{
    29.         name:'爪哇开发'
    30.         },
    31.         methods: {
    32.         showInfo(event){
    33.             alert('同学你好')
    34.         }
    35.     }
    36.  
    37.         })
    38.         
    39.     </script>
    40.     
    41. </body>

     

     

    阻止事件冒泡：

     打开后：

     3）让事件只触发一次

     

     总结：

    Vue中的事件修饰符：

    1）prevent：阻止默认事件（常用）

    2）stop：阻止事件冒泡

    3）once：事件只触发一次（常用）

    4）capture：使用事件的捕获模式

    5) self：只有event.target是当前操作的元素才触发事件

    6）passive：事件的默认行为立即执行，无需等待事件回调执行完毕

  • 相关阅读:
    IP地址详解、无分类编址和路由寻址（计算机网络二）
    Grafana 基于telegraf,influx监控vCenter
    GBASE 8s 自动删除正在被使用的数据库
    使用 React Flow 构建一个思维导图应用
    ES6 class类关键字super
    【2023校园招聘】 钉钉AI应用开发平台开始校招拉~
    在Telegram营销后该如何进行客户管理
    Linux一篇入门（以Ubuntu为例）
    iTextSharp操作PDF
    elementui修改message消息提示颜色
  • 原文地址：https://blog.csdn.net/qq_50652600/article/details/127084491