Vue框架—事件修饰符

最新推荐文章于 2024-12-13 10:33:33 发布

原创最新推荐文章于 2024-12-13 10:33:33 发布 · 388 阅读

0 ·

CC 4.0 BY-SA版权

Vue 专栏收录该内容

13 篇文章

订阅专栏

事件修饰符

事件修饰符
stop	阻止冒泡
prevent	阻止默认事件，行为
capture	添加事件侦听器是，使用事件捕获模式
self	当事件在该元素本身（比如不是子元素）触发时触发回调
once	事件只触发一次

上一篇博客我们学习了一些框架指令，但是指令指定过程中存在冒泡问题，什么是冒泡问题呢——小泡到大泡

看如下代码：

<!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>    
    <style> 
     #app{
         width:100px;
         height:100px;
         background-color: pink;
     }
    </style>
</head>
<body>
      <!--Vue 实例控制的元素区域就是我们的 V -->
      <div id="app" @click="btnDiv" >              
        <input type="button" value="点我"v-on:click="btn" @click="btn">  </div>
       
        <script src="https://cdn.jsdelivr.net/npm/vue@2.6.6/dist/vue.js"></script>
        <script>
            //我们new出来的 VM 对象就是MVVM中的 VM调度者    
                   var vm =new Vue({
                       el: '#app',  
                       data:{ },
                       methods:{
                          btn(){
                              console.log("触发了button事件事件")
                          },
                          btnDiv(){
                              console.log("触发了DIV事件")
                          },                         
                       }               
                   })
               </script>  
   </body>
   </html>

结果如下：div元素为父元素，input为子元素，当触发子元素的点击事件时，相应的从里到外也触发了父元素的点击事件，这就是冒泡。