Vue事件修饰符示例-优快云博客

本文通过一个具体的Vue实例展示了事件修饰符的工作原理，包括事件冒泡与捕获的使用方式，有助于理解Vue中如何精确控制DOM事件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="traceur.js"></script>
    <script src="BrowserSystem.js"></script>
    <script src="bootstrap.js"></script>
    <script src="vue.js"></script>
</head>
<script  type="text/traceur">
window.onload=function(){

    var app3 = new Vue({
      el: '#app-3',
      data:{
      },
      
      methods:{
        method1:function(){
            console.log(1);
        },
        method2:function(){
            console.log(2);
        },
        method3:function(){
            console.log(3);
        },
      },
      
      components:{
      },
      
      computed:{
      }
      
    })
    
};

</script>
<style>
    .c1{width:300px;height:300px;background-color:blue;}
    .c2{width:200px;height:200px;background-color:red;}
    .c3{width:100px;height:100px;background-color:gray;}
</style>
<body>
<div id="app-3" >
    <div @click="method1" class="c1">
        1 //点击1弹出1
        <div @click.stop='method2' class="c2">
            2 //原来点击2弹出21，加了.stop后，点击2弹出2，点击3弹出32，2收到事件后不再冒泡到外层。
            <div @click="method3" class="c3">
                3 //点击3弹出321
            </div>
        </div>
    </div>
    
    <div @click.capture="method1" class="c1">
        11  //
        <div @click.capture='method2' class="c2">
            22 // 点击2弹出12
            <div @click="method3" class="c3">
                33 // 点击3弹出123
            </div>
        </div>
    </div>
</div>
</body>
</html>