Начало работы с 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>
Скриншот:
