[TOC]
# v-on
* 縮寫：@
* 預期：Function | Inline Statement | Object
* 參數：event
* 修飾符：
```
.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 } 模式添加偵聽器
```
## 用法：
> 綁定事件監聽器。事件類型由參數指定。表達式可以是一個方法的名字或一個內聯語句，如果沒有修飾符也可以省略。
用在普通元素上時，只能監聽原生 DOM 事件。用在自定義元素組件上時，也可以監聽子組件觸發的自定義事件。
> 在監聽原生 DOM 事件時，方法以事件為唯一的參數。如果使用內聯語句，語句可以訪問一個 $event 屬性：v-on:click="handle('ok', $event)"。
> 從 2.4.0 開始，v-on 同樣支持不帶參數綁定一個事件/監聽器鍵值對的對象。注意當使用對象語法時，是不支持任何修飾器的。
## 示例
### 1. 點擊事件
```
<div id="test">
<button v-on:Click="onClick" v-on="{mouseenter: onEnter, mouseleave: onOut}">點我</button>
</div>
```
```
<script>
var app = new Vue({
el:"#test",
methods:{
onClick: function(){
alert("你點了我")
},
onEnter(){
console.log("進入")
},
onOut(){
console.log("出去")
}
}
})
</script>
```
### 2.表單阻止提交事件不再重載
<!-- 提交事件不再重載頁面 -->
```
<form v-on:submit="onSubmit">
<input type="text">
<button type="submit">提交</button>
</form>
methods:{
onSubmit:function(e){
e.preventDefault(); //要想事件不重載,要加這句
console.log("submittt")
}
}
```
```
<form v-on:submit.prevent="onSubmit">
<input type="text">
<button type="submit">提交</button>
</form>
<script>
var app = new Vue({
el:"#test",
data:{
},
methods:{
onSubmit:function(e){
//e.preventDefault();
console.log("submittt")
}
}
})
</script>
```
