「这是我参与11月更文挑战的第9天，活动详情查看：2021最后一次更文挑战」
v-on就是用于绑定事件的
例如：有个按钮，当点击的时候执行一些操作
<div class="app">
<button v-on:click="myclick">click me</button>
</div>
上述代码中，v-on:后面的值是一个方法，可以写成myclick()，没有参数可以写成myclick。
另外这种事件对应的方法不是定义在data选项中，而是定义在vue实例的methods选项中，里面都是一个一个的function
var app = new Vue({
el:'.app',
data:{
},
methods:{
myclick:function(){
console.log(111111);
}
}
});
v-on也可以绑定多个事件
多个事件可以单独多个v-on绑定
<div class="app">
<button v-on:mouseenter='onenter' v-on:mouseleave='leave'>click me</button>
</div>
也可以使用一个v-on，里头用对象的形式书写，对象的键名就是事件名，对象的键值就是对应事件要执行的方法。多个事件之间通过,分开
<div class="app">
<button v-on="{mouseenter:onenter,mouseleave:leave}">click me</button>
</div>
当然也可以混合使用
<div class="app">
<button v-on="{mouseenter:onenter,mouseleave:leave}" v-on:click="myclick">click me</button>
</div>
但是需要注意，在vue实例中方法一定要有，不然就报错。
var app = new Vue({
el:'.app',
data:{
},
methods:{
myclick:function(){
console.log("clicked");
},
onenter:function(){
console.log("mouseented");
},
leave:function(){
console.log("mouseleaved");
}
}
});
例子：在绑定form表单中的提交事件时
<div class="app">
<form v-on:submit='onSubmit($event)'>
<!-- $event是vue里面的事件对象，vue能认识 -->
<input type="text" >
<button type="submit">提交</button>
</form>
</div>
var app = new Vue({
el:'.app',
data:{
},
methods:{
onSubmit:function(e){
e.preventDefault();
//阻止浏览器的默认行为，因为在表单提交的时候，浏览器会默认发送一个get或者post请求到指定页面，刷新整个页面。
console.log("onSubmited");
}
}
});
注意：
$event是vue里面的事件对象，vue能认识
在表单提交的时候，浏览器会默认发送一个get或者post请求到指定页面，刷新整个页面。阻止浏览器的默认行为，可以用事件对象e.preventDefault()
但像上述form表单提交的这种浏览器默认事件，每次都要写e.preventDefaul()其实还是比较麻烦。vue中可以更好的解决，只要在事件的后面添加一个prevent修饰符即可，表示阻止默认事件
<div class="app">
<form v-on:submit.prevent='onSubmit'>
<input type="text" >
<button type="submit">提交</button>
</form>
</div>
var app = new Vue({
el:'.app',
data:{
},
methods:{
onSubmit:function(){
console.log("onSubmited");
}
}
});
绑定事件中，除了prevent修饰符，还有stop,表示停止冒泡事件
<div class="app">
<div v-on:click.stop='onClick'>
</div>
</div>
另外,当绑定的事件是keyup、keypress、keydown键盘事件时，当需要判断按下是回车时。
在以前我们需要判断事件对象的keyCode，虽然功能特别简单，但是每次去写还是特别麻烦。所以对应也有修饰符，如enter修饰符，表示按键是enter键
<div class="app">
<div v-on:keydown.enter='mykeydownFn'>
</div>
</div>
跟v-bind一样，v-on也非常常用，对应也有快捷方式：
**v-on:事件名** 可以简写为 **@事件名**
<div class="app">
<div @keydown.enter='mykeydownFn'>
</div>
</div>
以上就是v-on指令的基本使用！
