SOURCE

new Vue({
    el: "#app",
    data: {},
    methods: {
        outMsg() {
            alert('外层out')
        },
        innerMsg() {
          alert("内层inner")  
        },
        alertMessage() {
            alert('事件修饰符')
        }
    }
})

<div id="app">
    <p>事件行为修饰符</p>
    <div class="out" @click="outMsg">
        <div class="inner" @click="innerMsg">bubble</div>
    </div>
    <br/>
     <div class="out" @click.self="outMsg">
        <div class="inner" @click="innerMsg">out self</div>
    </div>
    <br/>
    <div class="out" @click="outMsg">
        <div class="inner" @click.stop="innerMsg">stop bubble</div>
    </div>
    <br/>
    <div class="out" @click.capture="outMsg">
        <div class="inner" @click="innerMsg">can capture</div>
    </div>
    <a href="www.baidu.com" @click="alertMessage" style="background:red">baidu</a>
    <a href="www.baidu.com" @click.prevent="alertMessage" style="background:orange">prevent</a>
    <button @click.once="alertMessage">once</button>
    
    <p>键盘事件修饰符,当按钮处理焦点时监听事件</p>
    <button @keyup.13="alertMessage">keycode=13</button>
    <button @keyup.delete="alertMessage">delete键</button>
    <button @keyup.alt.enter="alertMessage">alt + enter</button>
    <button @click.ctrl="alertMessage">ctrl + click (ctrl+alt+click)</button>
    <button @click.ctrl.exact="alertMessage">ctrl(jsrun暂未支持vue 2.5.0)</button>
    
    <p>鼠标事件修饰符</p>
    <button @mousedown.left="alertMessage">点击鼠标左键</button>
    <button @mousedown.middle="alertMessage">按下鼠标滚轮键</button>
    <button @mousedown.right="alertMessage">点击鼠标右键</button>
</div>

.out {
    width: 150px;
    height: 150px;
    background: blue;
}
.inner {
    width: 100px;
    height: 100px;
    background: orange;
    line-height: 100px;
    margin: auto;
}