Getting started with Vue: v-on
V-on is the listener for binding events, and the specific event type is specified by the event name.
Basic usage
v-on:("event name")
Example
.html
<button v-on:click="login"></button>
v-on can also be abbreviated with @ instead
<button @click="login"></button>
.js
var app =new Vue({
el:"#app",
methods:{
login:function(){
// 逻辑代码
}
}
})
v-on:("event name (parameter)")
<button v-on:click="login(username,password)"></button>
<button @click="login(username,password)"></button>
var app =new Vue({
el:"#app",
methods:{
login:function(参数){
// 逻辑代码
}
}
})
Note: The wording of v-on only provides a convenient way to bind events, and does not change native JS events, so all native JS events are a list of supported MDN event types
Example: v-on implements a simple counter
Function: Display 1-10 through two buttons, and display over-range pop-up box.
<!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>
Screenshot:
