vue.js事件修饰符.stop阻止单击事件冒泡

Vue.js 为 v-on 提供了事件修饰符来处理 DOM 事件细节,如:event.preventDefault() 或 event.stopPropagation()。
Vue.js通过由点(.)表示的指令后缀来调用修饰符。其中.stop就是用来阻止单击事件冒泡,用法如:
<a v-on:click.stop="doThis"></a>

下面是全部代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue .stop阻止冒泡</title>
</head>
<style>
    #aa { 150px;height: 150px;background:pink;}
    #bb {margin: 0 auto;text-align: center; 100px;height: 80px;background:orange;}
</style>
<body>
    <script type="text/javascript" src="vue.min.js"></script>
    <div >
        <div >
            <div >
                <a >点我阻止冒泡</a>
            </div>
        </div>
    </div>
    <script type="text/javascript">
        var vm=new Vue({
            el:'#app',
            data:{
            },
            methods:{
                doaa:function(){
                    alert("do aa");//点击cc部分,不发生冒泡
                },
                dobb:function(){
                    alert("do bb");//点击bb,即橙色,发生冒泡,执行函数dobb,doaa
                },
                docc:function(){
                    alert("do cc---.stop");
                }
            }
        })
    </script>
</body>
</html>

vue.js事件修饰符.stop阻止单击事件冒泡