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>再次点击按钮就只会输出按钮的事件响应
