Vue事件修飾符，.capture關鍵字詳解

.prevent 用於阻止默認事件，點擊a標簽href可以打開相應的鏈接，那么給事件加
    上此關鍵字，click.prevent

    .capture 冒泡順序
    例如 div1中嵌套div2中嵌套div3
    
     

  <div id="app" v-on:click="show">
            1
            <div id="app2" v-on:click.capture="show2">
                2
                <div id="app3" v-on:click="show3">
                    3
                    
                </div>
            </div>
        </div>


        <script type="text/javascript">
        var vm=new Vue({
            el:"#app",
            data:{
                
            },
            methods:{
                show:function(){
                    console.log("這是app的方法")
                },
                show2:function(){
                    console.log("這是app2的方法")
                },
                show3:function(){
                    console.log("這是app3的方法")
                }
            }
        })
    </script>

 

    此處的代碼因為div2有capture關鍵字，所以此時冒泡的順序發生了改變
    正常情況下：
        點擊div3一層一層冒泡，先div3=》div2=》div1

    使用了關鍵字：
        點擊div3時，先div2=》div3=》div1
        1.先冒泡外層帶有關鍵字的事件
        2.外層執行結束之后，往里層執行事件
        3.最后按照從里向外的事件開始執行
        就是說只要存在一個capture關鍵字，就會影響整個嵌套的執行
        例子
            div1中嵌套div2中嵌套div3.capture中嵌套div4
                此時點擊div1
                先執行帶有capture的div3
                然后執行div4
                最后按照從里向外的順序執行
                順序就是   div3=》div4=》div2=》div1

        其他疑惑
            此時嵌套為
            div1中嵌套div2.capture中嵌套div3中嵌套div4
            那么可以想一下點擊最里層的div4會怎么觸發呢
            
            1.觸發帶有關鍵字的 div2
            2.觸發點擊的div4
            3.最后從里向外執行
            那么順序為   div2=》div4=》div3=》div1