Vue入门：v-on
v-on就是绑定事件的监听器，具体事件类型由事件名指定。
基础用法
v-on:(“事件名”)
示例
.html
<button v-on:click="login"></button>
v-on也可以简写以@代替
<button @click="login"></button>
.js
var app =new Vue({
el:"#app",
methods:{
login:function(){
// 逻辑代码
}
}
})
v-on:(“事件名（参数）”)
<button v-on:click="login(username,password)"></button>
<button @click="login(username,password)"></button>
var app =new Vue({
el:"#app",
methods:{
login:function(参数){
// 逻辑代码
}
}
})
注：v-on这种写法只是提供了便捷的绑定事件方式，并没有改变原生的JS事件，所以所有的原生JS事件都是支持的MDN事件类型一览表
实例：v-on实现简单的计数器
功能：通过两个按钮实现显示1-10，超过范围弹框显示。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="app">
<button type="button" @click="sub" >-</button>
<span id="">
{
{num}}
</span>
<button type="button" @click="add">+</button>
</div>
<script>
var app =new Vue({
el:"#app",
data:{
num:"1"
},
methods:{
//减
sub:function(){
if(this.num==1)
alert("已经最小啦！")
else
this.num--;
},
add:function(){
if(this.num==10)
alert("已经最大啦！")
else
this.num++;
}
}
})
</script>
</body>
</html>
截图：
