關於事件即v-on在指令中已經介紹過，@簡寫也說過,就不再說明如何聲明使用了。
我們可以在調用事件方法是為方法添加參數 $event,表示一個事件實例。
在處理方法中，得到這個實參，可通過這個對象獲得一些方法和作用。

<div id="app">
    <button @click="clickPrint($event,‘你好‘)">點擊，事件對象</button>
</div>

methods:{
            clickPrint(e,str){
                console.log(str);
                console.log(e);
                console.log(e.type);
                console.log(e.target);//獲得事件的目標對象DOM
            }
}
 

如果有多個參數，那麽將$event設置為第一個參數。

事件冒泡

當事件發生後，這個事件就要開始傳播(從裏到外或者從外向裏)，如何阻止事件冒泡，在js中是通過stopPropagation()方法來阻止事件冒泡的。

<div id="app">
        <div @click="printD()">
            <p @click="printP()">
                <button @click="clickPrint($event,‘你好‘)">點擊，事件對象</button>
            </p>
        </div>
    </div>
 

此時將會出現向上冒泡情況。
只需在觸發事件的指令後添加修飾符.stop

<button @click.stop="clickPrint($event,‘你好‘)">點擊，事件對象</button>

默認行為

阻止默認行為，在js中調用event.preventDefault(),在Vue中，添加修飾符.prevent

<a href="http://www.baidu.com" target="_blank" @click.stop="study">鏈接</a>

此時添加.stop將不會鏈接到百度的主頁面。
當然也可以通過串聯的方式

<a href="http://www.baidu.com" target="_blank" @click.stop.prevent="study">鏈接</a>
 

還有，如：.once，只觸發一次事件

<button v-on:click.once="clickOnce()">該事件只觸發一次</button>

還有其他修飾符

• .stop - 調用 event.stopPropagation()。
• .prevent - 調用 event.preventDefault()。
• .capture - 添加事件偵聽器時使用 capture 模式。
• .self - 只當事件是從偵聽器綁定的元素本身觸發時才觸發回調。
• .{keyCode | keyAlias} - 只當事件是從特定鍵觸發時才觸發回調。
• .native - 監聽組件根元素的原生事件。
• .once - 只觸發一次回調。
• .left - (2.2.0) 只當點擊鼠標左鍵時觸發。
• .right - (2.2.0) 只當點擊鼠標右鍵時觸發。
• .middle - (2.2.0) 只當點擊鼠標中鍵時觸發。
• .passive - (2.3.0) 以 { passive: true } 模式添加偵聽器
  更多，需要查看官網v-on

Vue2.0筆記——事件對象，事件冒泡及默認行為