被迫走上前端之路第三课之vue的v-on事件监听

在vue的事件处理中,使用v-on来监听DOM事件,并在事件触发时执行对应的 JavaScript。

DOM事件:DOM(document object model)事件是指在HTML文档中发生的特定交互瞬间,如点击、鼠标移动、键盘按键等。

语法

<button v-on:click="handler">{{ count }}</button>

简写方式:

<button @click="handler">{{ count }}</button>

事件处理器 (handler) 的值可以是:

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

可能很多同学单凭这两句话不是很理解到底什么是内联事件什么是方法事件,但先别急,我们接着看下面的例子你就理解了

举个栗子

这里我们定义一个点击事件,使button按钮的值随着我们点击的次数而改变,很显然这是用户与页面的交互

  • 内联事件处理器的实现
<script setup>
import { ref } from 'vue'const count = ref(0)
</script><template><!-- 事件触发时直接执行绑定的JavaScript相关语句 --><button @click="count++">count is: {{ count }}</button>
</template>
  • 方法事件处理器
<script setup>
import { ref } from 'vue'const count = ref(0)
const handler=()=>{count.value++;
}
// // 写法二
// function handler(){
//   count.value++;
// }
</script><template><!-- html中的事件绑定指向JavaScript中的方法名 --><button @click="handler">count is: {{ count }}</button>
</template>

更多关于事件处理的内容详见官网:https://cn.vuejs.org/guide/essentials/event-handling.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/775822.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

第十篇【传奇开心果系列】Python自动化办公库技术点案例示例:深度解读Python自动化操作Excel

传奇开心果博文系列 系列博文目录Python自动化办公库技术点案例示例系列博文目录 前言一、重要作用解说二、Python操作Excel的常用库介绍三、数据处理和分析示例代码四、自动化报表生成示例代码五、数据导入和导出示例代码六、数据可视化示例代码八、数据校验和清洗示例代码九、…

go面向对象

继承 封装 多态 定义结构体 //定义老师的结构体 type Teacher struct {Name stringAge intSchool string }func main() {var t1 Teacherfmt.Println(t1)t1.Name "tom"t1.Age 20t1.School "school"fmt.Println(t1) } 结构体实例的创建 package ma…

Day33:学习尚上优选项目

学习计划&#xff1a;完成尚硅谷的尚上优选项目 学习进度&#xff1a;尚上优选项目 知识点&#xff1a; 一、项目概述 项目介绍业务流程功能架构技术架构核心技术项目模块其他资源 二、前后端分离开发概述 什么是前后端分离开发开发流程介绍 三、搭建后端环境 搭建项目结…

uniApp使用XR-Frame创建3D场景(4)金属度和粗糙度

上一篇讲解了如何在uniApp中创建xr-frame子组件并创建简单的3D场景。 这一篇我们讲解xr-frame中关于mesh网格材质的金属度和粗糙度的设置。 1.先看源码 <xr-scene render-system"alpha:true" bind:ready"handleReady"> <xr-node visible"{…

springboot使用com.github.binarywang 包实现微信网页上的支付和退款

前提 微信小程序中实现微信支付是从小程序中调去微信支付的界面直接进行支付&#xff0c;那么在pc端需要实现微信的支付呢&#xff0c;是需要出现一个二维码让用户使用扫码支付的。 注意&#xff1a; 需要实现pc端的微信支付&#xff0c;需要在微信商户平台开通native支付&…

springboot集成logback-spring.xml文件

彩色日志日志分debug和error文件输出,方便开发人员运维日志限制最大保管天数日志限制总量大小占用量GB日志限制单个文件大小MB日志显示最大保留天数屏蔽没用的日志<?xml version="1.0" encoding="UTF-8"?> <!--~ Copyright (c) 2020 mingyue4c…

如何使用VS统计自己的代码量?

历经漫漫编程之路&#xff0c;此刻我们不妨回首细数&#xff0c;那已累积的无数行代码&#xff0c;它们如同一串串无声的脚印&#xff0c;记载着我们默默耕耘的点滴时光。每一行代码都是平凡努力的印记&#xff0c;见证了我们的执着与付出&#xff0c;也塑造了今天的我们。让这…

uniApp使用XR-Frame创建3D场景(3)光源投影的运用。

上一篇讲解了如何在uniApp中创建xr-frame子组件并创建简单的3D场景。 这篇我们讲解光源在场景中的运用以及相关属性。 在子组件 xr-start的index.wxml文件中我们加入如下代码 <xr-scene render-system"alpha:true" bind:ready"handleReady"><xr…

PG中的一例简单的update看表膨胀

PostgreSQL数据库的MVCC机制中,一个明显的特点是,在执行DELETE操作,它一般并不立即擦除要删的数据,通常只是做一个标记,留给VACUUM进程去做相应的清理,并且是有条件的清理。 而UPDATE操作,则更是一个DELETE操作和一个INSERT操作的组合。INSERT操作则通常会APPEND一条记…

操作系统系列学习——内存分区与分页

文章目录 前言内存分区与分页 前言 一个本硕双非的小菜鸡&#xff0c;备战24年秋招&#xff0c;计划学习操作系统并完成6.0S81&#xff0c;加油&#xff01; 本文总结自B站【哈工大】操作系统 李治军&#xff08;全32讲&#xff09; 老师课程讲的非常好&#xff0c;感谢 【哈工…

stm32开发环境搭建

软件驱动安装 安装Keil5 MDK 安装器件支持包 软件注册 安装STLINK驱动 安装USB转串口驱动 新建工程步骤 keil中创建工程,并选择对应的芯片型号 工程文件夹下新建Start文件夹,并添加以下文件: Libraries\CMSIS\CM3\DeviceSupport\ST\STM32F10x\startup\arm下的8个启动文件…

MATLAB机器学习工具箱——傻瓜式操作

一、使用回归学习器预测北京二手房房价 软件&#xff1a;MATLAB R2023 a 数据&#xff1a; 第一步&#xff1a;导入原始数据和待预测数据 第二步 &#xff1a;打开工具箱中的回归学习器导入学习数据 1.新建会话 2.寻找导入learning data 3.自动锁定前7列为自变量&#xff…

共射极放大电路理论计算

目录&#xff1a; 1、概述 2、理论计算 3、Multisim仿真验证 1&#xff09;静态工作点与放大倍数 2&#xff09;输入阻抗仿真 1、概述 如下图所示的共射极放大电路&#xff0c;本内容主要计算静态工作点电压、电压放大倍数与输入输出阻抗。 2、理论计算 列出方程如下&am…

AndroidStudio中一些实用插件

1.RainbowBrackets插件为圆括号、方括号和花括号内的代码添加了漂亮的彩虹色 2.CodeGlance类似于Sublime或Xcode&#xff0c;CodeGlance插件在编辑器中嵌入了代码迷你图。滚动条也有所增大。在CodeGlance预览文件的代码模式下&#xff0c;用户可以快速导航到目标处。 3.ADBWifi…

java数据结构与算法刷题-----LeetCode540. 有序数组中的单一元素

java数据结构与算法刷题目录&#xff08;剑指Offer、LeetCode、ACM&#xff09;-----主目录-----持续更新(进不去说明我没写完)&#xff1a;https://blog.csdn.net/grd_java/article/details/123063846 文章目录 1. 异或运算2. 全数组二分查找异或奇偶3. 偶数下标二分查找 1. 异…

前端如何判断元素是否到达可视区域

以图片显示为例&#xff1a; window.innerHeight 是浏览器可视区的高度&#xff1b;document.body.scrollTop || document.documentElement.scrollTop 是浏览器滚动的过的距离&#xff1b;imgs.offsetTop 是元素顶部距离文档顶部的高度&#xff08;包括滚动条的距离&#xff0…

备战面试:Java基础二

continue、break 和 return 的区别是什么? 在循环结构中&#xff0c;当循环条件不满足或者循环次数达到要求时&#xff0c;循环会正常结束。但是&#xff0c;有时候可能需要在循环的过程中&#xff0c;当发生了某种条件之后 &#xff0c;提前终止循环&#xff0c;这就需要用到…

快速上手Spring Cloud 十一:微服务架构下的安全与权限管理

快速上手Spring Cloud 一&#xff1a;Spring Cloud 简介 快速上手Spring Cloud 二&#xff1a;核心组件解析 快速上手Spring Cloud 三&#xff1a;API网关深入探索与实战应用 快速上手Spring Cloud 四&#xff1a;微服务治理与安全 快速上手Spring Cloud 五&#xff1a;Spring …

机器学习——聚类算法-层次聚类算法

机器学习——聚类算法-层次聚类算法 在机器学习中&#xff0c;聚类是一种将数据集划分为具有相似特征的组或簇的无监督学习方法。聚类算法有许多种&#xff0c;其中一种常用的算法是层次聚类算法。本文将介绍聚类问题、层次聚类算法的原理、算法流程以及用Python实现层次聚类算…

蓝桥杯练习题——博弈论

1.必胜态后继至少存在一个必败态 2.必败态后继均为必胜态 Nim游戏 思路 2 3&#xff0c;先手必赢&#xff0c;先拿 1&#xff0c;然后变成 2 2&#xff0c;不管后手怎么拿&#xff0c;先手同样操作&#xff0c;后手一定先遇到 0 0 a1 ^ a2 ^ a3 … ^ an 0&#xff0c;先…