1· .stop 阻止冒泡

    <!-- 使用 .stop 阻止冒泡 -->
    <!-- 點(diǎn)擊按鈕 先觸發(fā)btn的click事件 然后向上冒泡, 觸發(fā)div的click事件  加上.stop阻止冒泡 只觸發(fā)btn的 -->
    <div class="inner" @click="divHander"> 
        <input type="button" value="戳我" @click.stop="btnHander"/>
    </div>

2· .prevent 阻止默認(rèn)行為

<!-- 使用 .prevent 阻止默認(rèn)行為 -->
    <a  @click.prevent="linkClick">有問題,就去百度咯</a>

3· .capture 實(shí)現(xiàn)捕獲觸發(fā)事件機(jī)制

<!-- 使用 .capture 實(shí)現(xiàn)捕獲觸發(fā)事件機(jī)制 -->
    <!-- 點(diǎn)擊按鈕 先觸發(fā)div的click事件 然后向下觸發(fā)btn的事件 -->
    <div class="inner" @click.capture="divHander"> 
        <input type="button" value="戳我" @click="btnHander"/>
    </div>

4· .self 實(shí)現(xiàn)只有點(diǎn)擊當(dāng)前元素時(shí)候 , 才會觸發(fā)事件處理函數(shù)

<!-- 使用 .self 實(shí)現(xiàn)只有點(diǎn)擊當(dāng)前元素時(shí)候 , 才會觸發(fā)事件處理函數(shù) -->
    <!-- 點(diǎn)各自觸發(fā)各自的事件,不通過冒泡或捕獲的方式觸發(fā)別的元素的事件 -->
    <div class="inner" @click.self="divHander"> 
        <input type="button" value="戳我" @click="btnHander"/>
    </div>

5· .once 只觸發(fā)一次事件處理函數(shù)

<!-- 使用 .once 只觸發(fā)一次事件處理函數(shù) -->
    <a  @click.prevent.once="linkClick">有問題,就去百度咯</a>

.stop 和 .self 的區(qū)別: .self只會阻止自己身上冒泡行為的觸發(fā),并不會真正阻止冒泡的行為(會一直向上冒泡)

完整代碼如下:

<div id="app">
        <!-- 使用 .stop 阻止冒泡 -->
        <!-- 點(diǎn)擊按鈕 先觸發(fā)btn的click事件 然后向上冒泡, 觸發(fā)div的click事件  加上.stop阻止冒泡 只觸發(fā)btn的 -->
        <div class="inner" @click="divHander"> 
            <input type="button" value="戳我" @click.stop="btnHander"/>
        </div>
        
        <!-- 使用 .prevent 阻止默認(rèn)行為 -->
        <a  @click.prevent="linkClick">有問題,就去百度咯</a>
        
        <!-- 使用 .capture 實(shí)現(xiàn)捕獲觸發(fā)事件機(jī)制 -->
        <!-- 點(diǎn)擊按鈕 先觸發(fā)div的click事件 然后向下觸發(fā)btn的事件 -->
        <div class="inner" @click.capture="divHander"> 
            <input type="button" value="戳我" @click="btnHander"/>
        </div>
        
        <!-- 使用 .self 實(shí)現(xiàn)只有點(diǎn)擊當(dāng)前元素時(shí)候 , 才會觸發(fā)事件處理函數(shù) -->
        <!-- 點(diǎn)各自觸發(fā)各自的事件,不通過冒泡或捕獲的方式觸發(fā)別的元素的事件 -->
        <div class="inner" @click.self="divHander"> 
            <input type="button" value="戳我" @click="btnHander"/>
        </div>
        
        <!-- 使用 .once 只觸發(fā)一次事件處理函數(shù) -->
        <a  @click.prevent.once="linkClick">有問題,就去百度咯</a>
    </div>
    <script type="text/javascript"> 
        var vm= new Vue({
            el:'#app',
            data:{},
            methods:{
                divHander() {
                    console.log('觸發(fā)了 div 的點(diǎn)擊事件')
                },
                btnHander() {
                    console.log('觸發(fā)了 Btn 的點(diǎn)擊事件')
                },
                linkClick() {
                    console.log('觸發(fā)了 a鏈接 的點(diǎn)擊事件')
                }
            }
        })
    </script>