Vue 3 事件绑定
一则或许对你有用的小广告
欢迎加入小哈的星球 ,你将获得:专属的项目实战 / 1v1 提问 / Java 学习路线 / 学习打卡 / 每月赠书 / 社群讨论
- 新项目:《从零手撸:仿小红书(微服务架构)》 正在持续爆肝中,基于
Spring Cloud Alibaba + Spring Boot 3.x + JDK 17...
,点击查看项目介绍 - 《从零手撸:前后端分离博客项目(全栈开发)》 2 期已完结,演示链接: http://116.62.199.48/
截止目前, 星球 内专栏累计输出 72w+ 字,讲解图 3103+ 张,还在持续爆肝中.. 后续还会上新更多项目,目标是将 Java 领域典型的项目都整一波,如秒杀系统, 在线商城, IM 即时通讯,权限管理,Spring Cloud Alibaba 微服务等等,已有 2400+ 小伙伴加入学习 ,欢迎点击围观
大家好,我是小哈。
事件绑定是 Vue 3 中的一个关键概念,它允许你在 DOM 元素上监听和响应各种用户操作,例如点击、输入、鼠标移动等。本小节中,我们将学习 Vue 3 事件绑定相关知识。
一、基本的事件绑定
在 Vue 3 中,你可以使用 v-on
指令来绑定事件监听器,格式如下:
<button v-on:click="sayHello">点击我</button>
另外,也支持以 @
符简写的形式,格式如下:
<button @click="sayHello">点击我</button>
下面是一个简单的示例,演示了如何在按钮上监听点击事件:
<template>
<button @click="sayHello">点击我</button>
</template>
<script setup>
// 点击事件
const sayHello = () => {
// 弹出 alert 弹框
alert('Hello, 犬小哈教程')
}
</script>
在上面的示例中,我们在按钮上使用 @click
缩写来绑定一个点击事件监听器,当按钮被点击时,sayHello
方法会被调用,弹出一个包含 "Hello, 犬小哈教程" 的警告框。
二、事件中调用其他函数
在事件方法中支持调用其他函数。示例代码如下:
<template>
<button @click="clickMe">点击我</button>
</template>
<script setup>
// 点击事件
const clickMe = () => {
showMessage()
}
const showMessage = () => alert('犬小哈教程')
</script>
上述代码中,我们在 clickMe
事件方法中调用了 showMessage
方法,并弹出了一个 alert
框。
三、参数传递与事件对象
事件监听函数允许我们传递自定义的参数,示例代码如下:
<template>
<button @click="say('犬小哈')">说 犬小哈</button>
<button @click="say('教程')">说 教程</button>
</template>
<script setup>
// 点击事件
const say = (message) => {
// 弹出 alert 弹框
alert('Hello, ' + message)
}
</script>
在上面的示例中,我们通过 @click
指令传递了不同的消息给 say
方法,以实现在点击不同按钮时显示不同的问候语。
除了传递参数外,我们还可以访问事件对象,该对象包含有关事件的详细信息,例如鼠标坐标、键盘按键等,另外,还可以通过事件对象访问原生的 DOM
节点,以下是一个示例:
<template>
<button @click="showMousePosition">显示鼠标坐标</button>
</template>
<script setup>
// 点击事件
const showMousePosition = (event) => {
// 弹出 alert 弹框
alert(`X 轴坐标: ${event.clientX}, Y 轴坐标: ${event.clientY}`)
// 修改按钮的背景色为红色
event.srcElement.style.background = 'red'
}
</script>
在上面的示例中,我们定义了一个点击事件处理函数 showMousePosition
,它接受一个参数 event
,该参数包含了鼠标的坐标信息。最后,我们通过 event
将按钮的背景色修改为了红色。
四、总结
Vue 3 的事件绑定是构建交互性丰富的前端应用的关键工具之一。通过事件绑定,你可以监听用户的操作并做出相应的响应,实现用户界面的交互性和实时性。