使用v-on:事件名= "触发事件"可以用来绑定标签事件。也可以缩写为@事件名="触发事件"。事件如:点击，双击，键盘按下等。当触发该事件后，就会调用语句执行。
常见的事件:
click: 点击一次; 当鼠标点击，触发事件
dblclick: 双击；当鼠标双击，触发事件
focus: 获取焦点； 当得到了光标，触发事件
blur: 失去焦点; 当失去了光标，触发事件
mouseover:鼠标移至； 鼠标移至某标签上方，触发事件
mouserout:鼠标移出； 鼠标移出某标签上方，触发事件
keyup:键盘按下； 键盘按下，触发事件
对于触发某事件会做出的某响应可以为函数，语句，对象。可以当触发事件后调用一个函数，一条语句。
代码示例: 给三个按钮"-","+","更新得分"三个按钮标签添加点击事件。
<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><script src="js/vue.js"></script></head><body><div id="app"><button @click="count--" >-</button><div >当前得分为: {{count}}</div> <button @click="increment()" >+</button> <br><button @click="message = '总分为:'+count" >更新得分</button><div>{{message}}</div></div><script>const app = new Vue({el:"#app",data:{ message:"",count:0},methods:{increment(){this.count++;}}});</script></body></html>
页面效果: 点击-按钮会减分，加点+会加分，点击更新得分会更新下面的数据
函数中也可以传入$event，将event事件对象传入函数中进行处理。传入$event对象后，函数可以提供一个参数用于接收，包含了触发这个事件的所有参数。
代码示例: 输入框输入数据，按了回车会有提示。
<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><script src="js/vue.js"></script></head><body><div id="app"><input type="text" @keyup="show($event)"></div><script>const app = new Vue({el:"#app",data:{ message:"",},methods:{show(event){console.log(event);if(event.keyCode==13){alert("你按了回车")}}}});</script></body></html>
页面效果：
事件修饰符
1、阻止冒泡 stop
阻止冒泡的意思是，当某一个标签的事件触发也会触发该标签的父标签的事件。为了阻止此情况的发生，在绑定事件后面加上.prevent 。如@click.stop= "函数名";
代码测试: 叠三个div标签，在最里面div标签加入一个按钮。每个标签都绑定相同的事件函数，只是传入的值不一样
<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><script src="js/vue.js"></script></head><body><div id="app" @click="show('4')"><div @click="show('3')"><div @click="show('2')"><button @click="show('1')">按钮</button></div></div></div> <script>const app = new Vue({el:"#app",data:{ },methods:{show(num){console.log("我被点了:"+num);}}});</script></body></html>
当我们在页面点击一下按钮，控制台会出现:
当我们在按钮的点击事件加上prevent后。
<button @click.stop="show('1')">按钮</button>
再次点击按钮就只会输出按钮的事件响应
