v-on指令的作用其实就是绑定事件。
事件是JavaScript的灵魂，事件驱动着JavaScript程序的执行。
vue为我们提供了v-on指令用于绑定事件。
<button v-on:click="add">加分</button>
<button @click="reduce">减分</button>
这是两种基本的语法格式。
其中的add和reduce必须在vue实例中的methods中提前声明好。
vue语法具有很强的灵活性，其实我们可以将事件写成动态的。
<button v-on:[event]="add">加分</button>
<button @[event]="reduce">减分</button>
event的值我们需要在data中声明好。
除了正常的事件触发机制，vue也为我们提供了很多的事件修饰符，应用于各种业务场景。
- .stop - 阻止冒泡
- .prevent - 阻止默认事件
- .capture - 阻止捕获
- .self - 只监听触发该元素的事件
- .once - 只触发一次
- .left - 左键事件
- .right - 右键事件
- .middle - 中间滚轮事件
下面为大家提供一个小案例学习v-on的用法。
一个简单的计数程序
<div id="app">
本场得分：{
{
count}} <br/>
<button v-on:click="add">加分</button>
<button @click="reduce">减分</button>
<br/>
<input type="text" v-on:keyup.enter="enterAdd" v-model="test" />
</div>
<script>
var app = new Vue({
el:'#app',
data:{
count:0,
test:'',
event:'click'
},
methods: {
add(){
this.count++;
},
reduce(){
if(this.count == 0){
alert("得分不能小于0");
}else{
this.count--;
}
},
enterAdd(){
if(this.count + parseInt(this.test) < 0){
alert('得分不能小于0');
}else{
this.count = this.count + parseInt(this.test);
}
this.test = '';
}
}
});
</script>
可以通过按钮的点击事件触发分数的改变，也可以通过下方的input输入事件改变分数。
技术积累都是通过一点一点的代码量堆起来的，多多敲代码，要在具体的业务场景中懂得如何运用自己学到的知识。
有微信小程序课设、毕设需求联系个人QQ：505417246
关注下面微信公众号，可以领取微信小程序、Vue、TypeScript、前端、uni-app、全栈、Nodejs、Python等实战学习资料
