[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>
```
