Vue知识点总结(4)——v-on(超级详细)
2023-09-11 14:18:53 时间
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等实战学习资料
相关文章
- VUE - vue.runtime.esm.js?6e6d:619 [Vue warn]: Do not use built-in or reserved HTML elements as component i
- PHP 将数据从 Laravel 传送到 vue 的四种方式
- vue框架-基础1-vue包引入,指令,模板语言
- [Vue-rx] Pass Template Data Through domStreams in Vue.js and RxJS
- [Vue] Get up and running with vue-router
- vue3:子组件向父组件发送数据(vue@3.2.26)
- thinkphp6:前后端分离多图上传(php 8.1.1 / thinkphp v6.0.10LTS/vue 3.2.26)
- vue.js 3.2.22:菜单每行依次滑动出现的动画
- 后台管理系统的权限以及vue处理权限的思路
- vue 的 render 函数的用法:new Vue({ render: h => h(App), }).$mount(‘#app‘)
- vue:export default 和 export 区别(difference between Vue 'export default' and 'new Vue')
- vue - chunk-vendors.js文件太大,实现拆分打包的具体配置
- 怎样在vue中隐藏el-form-item中的值、设置输入框的值是只读
- 前端MVC Vue2学习总结(二)——Vue的实例、生命周期与Vue脚手架(vue-cli)
- Vue中vue-i18n结合element-ui实现国际化
- Vue、Vuejs从入门到精通 | vue-router详解
- 222:vue+openlayers 实现云雾缭绕,白鸽飞翔的效果
- 157:vue+openlayers 地图上添加Echarts饼图
- vue商品倒计时demo效果(整理)
- vue3面试题:2022 最新前端 Vue 3.0 面试题及答案(持续更新中……)
- uni-app的vue与nvue的区别(更新中)