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は単純なカウンターを実装します
機能：2つのボタンで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>
スクリーンショット：
