Vue学习笔记3——事件处理

事件处理

1、事件处理器

我们可以使用v-on 指令(简写为@)来监听DOM事件,并在事件触发时执行对应的JavaScript。

用法: v-on:click="methodName"@click="handler"

  • 内联事件处理器:事件被触发时执行的内联JavaScript语句(与onclick类似);
  • 方法事件处理器:一个指向组件上定义的方法的属性名或是路径。

(1)内联事件处理器

通常用于简单场景,举例:

html 复制代码
<template>
	<h3>内联事件处理器</h3>
	<button v-on:click = "count++">Add</button>
	<!-- <button @click = "count++">Add</button> -->
	<p>{{ count }}</p>
</template>

<script>
	export default{
		data(){
			return{
				count:0
			}
		}
	}
</script>

(2)方法事件处理器

html 复制代码
<template>
	<h3>内联事件处理器</h3>
	<button @click="addCount()">Add</button>
	<p>{{ count }}</p>
</template>

<script>
	export default{
		data(){
			return{
				count:0
			}
		},
		// 所有方法或者函数都放在这里,跟data同级
		methods:{
			addCount(){
				// 读取data里面数据的方法:this.count
				this.count++
			}
		}
	}
</script>

2、事件参数

事件参数可以获取event对象和通过事件传递数据

3、事件修饰符

在处理事件时调用event.preventDefault()event.stopPropagation() 是很常见的。尽管我们可以直接在方法内调用,但如果方法能更专注于数据逻辑而不用去处理DOM事件的细节会更好。

为解决这一问题,Vue 为v-on提供了事件修饰符,常用有以下几个:

  • .stop:阻止事件冒泡
  • .prevent:阻止默认事件
  • .once:事件只会被触发一次
  • .enter:回车按键触发
  • ...
html 复制代码
更多详情可查看官方文档:
https://cn.vuejs.org/guide/essentials/event-handling.html
相关推荐
王同学QaQ5 小时前
Vue3对接UE,通过MQTT完成通讯
javascript·vue.js
华仔啊5 小时前
基于 RuoYi-Vue 轻松实现单用户登录功能,亲测有效
java·vue.js·后端
艾小码6 小时前
告别Vue混入的坑!Composition API让我效率翻倍的3个秘密
前端·javascript·vue.js
Gracemark1 天前
高德地图-地图选择经纬度问题【使用输入提示-使用Autocomplete进行联想输入】(复盘)
vue.js
天下无贼1 天前
【手写组件】 Vue3 + Uniapp 手写一个高颜值日历组件(含跨月补全+今日高亮+选中状态)
前端·vue.js
洋葱头_1 天前
vue3项目不支持低版本的android,如何做兼容
前端·vue.js
奔跑的蜗牛ing1 天前
Vue3 + Element Plus 输入框省略号插件:零侵入式全局解决方案
vue.js·typescript·前端工程化
最后一个农民工1 天前
vue3实现仿豆包模版式智能输入框
前端·vue.js
_落纸1 天前
三大基础无源电子元件——电阻(R)、电感(L)、电容(C)
笔记
艾小码1 天前
Vue组件到底怎么定义?全局注册和局部注册,我踩过的坑你别再踩了!
前端·javascript·vue.js