Vue前端开发:事件绑定方式

事件定义

在Vue中,当一个元素通过使用v-on或语法糖@指令绑定某个事件后,则完成了事件被定义的过程,在这定义的过程中,指令的后面是定义事件的名称,等号的后面是事件被触发后执行的函数,当然,也可以在事件名称的后面,使用“.”点语法,添加事件的修饰符,如stop、prevent等,接下来分析事件定义后底层执行的流程。

事件定义的过程,实质是事件被元素绑定的过程,Vue在这个过程的底层做了什么?首先是编译模板生成渲染内容,然后将渲染内容生成虚拟节点,再由虚拟节点生成真实的DOM节点,生成DOM节点后,最后通过addEventListener方法,将对应事件绑定到元素中,其实现的流程如下图4-1所示。
在这里插入图片描述

事件绑定方式

在Vue 中,元素事件绑定的方式依赖于指令v-on或@,一旦完成事件绑定后,当被绑定的事件触发时,将会自动执行事件对应的函数,即执行事件的处理方法。

指令v-on或@

指令v-on专门用于元素事件的绑定,添加时通过“:”冒号将指令与事件名称隔开,冒号右侧为需要绑定的事件名称;@是指令绑定事件的一种简写方式,也是一种语法糖写法,由于书写简单,因此,大部分的开发人员都使用这种方式绑定元素的事件。

实例4-1 指令绑定事件

1. 功能描述

在页面中,添加两个按钮和一个div元素,分别使用不同的指令绑定两个按钮的单击事件,当单击某个按钮时,div元素中将显示变量累加后的值。

2. 实现代码

在项目components 文件夹的ch4子文件夹中,添加一个名为“BindEvent”的.vue文件,在文件中加入如清单4-1所示代码。

代码清单4-1 BindEvent.vue代码

<template><div class="action"><div class="a-item"><input type="button" value="v-on 绑定" v-on:click="num += 1" /></div><!-- @ 等价于v-on 指令--><div class="a-item"><input type="button" value="@ 绑定" @click="num += 1" /></div><div class="a-item">数量:{{ num }}</div></div>
</template><script>
export default {name: "BindEvent",data() {return {num: 1,};},
};
</script>
<style scoped>
.action .a-item {margin: 10px 0;
}
.action .a-item input {width: 80px;height: 32px;
}
</style>

3. 页面效果

保存代码后,页面在Chrome浏览器下执行的页面效果如图4-1所示。
在这里插入图片描述
  4. 源码分析

在上述示例的模板代码中,使用v-on和@指令的写法是等价的,都可以执行事件处理过程,使绑定的num 变量值累加1,因此,num变量的初始值为1,点击后变会为2,再次点击时变为3,由于@指令的方式写法更精简,目前大部分都使用这种方式绑定元素的事件。
在这里插入图片描述

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

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

相关文章

mac-ubuntu虚拟机(扩容-共享-vmtools)

一、磁盘扩容 使用GParted工具对Linux磁盘空间进行扩展 https://blog.csdn.net/Time_Waxk/article/details/105675468 经过上面的方式后还不够&#xff0c;需要再进行下面的操作 lvextend 用于扩展逻辑卷的大小&#xff0c;-l 选项允许指定大小。resize2fs 用于调整文件系统的…

【AAOS】【源码分析】CarSystemUI

目录 目录 概述 CarSystemUI组件 源代码 源码位置 主要模块 编译选项 CarSystemUI与SystemUI 编译方式 Car Emulator默认服务 CarSystemUI 启动流程 缩略词 概述 AAOS中的SystemUI虽然相较手机要简单不少,但却是车载开发中的一个重要组件,它负责管理和控制车机…

C++知识点复习

对于这些问题的回答&#xff0c;可以按照思维导图的结构来组织答案&#xff0c;然后再进行回答。 C11用过哪些特性&#xff1f; &#xff08;首先&#xff0c;要回答好这个问题&#xff0c;需要注意问题的层次&#xff0c;不要一上来就说新增了某某关键字和语法&#xff0c;在…

.net framework 3.5sp1开启错误进度条不动如何解决

浏览器地址栏输入www.dnz9.com远程解决netframework问题 在Windows操作系统上安装或启用.NET Framework 3.5 SP1时&#xff0c;如果遇到进度条不动的问题&#xff0c;可能由多种原因引起。以下是一些可能的解决方案&#xff1a; 1. 使用Windows功能对话框 1.打开“控制面板”。…

openpnp - 在openpnp中单独测试相机

文章目录 openpnp - 在openpnp中单独测试相机概述笔记END openpnp - 在openpnp中单独测试相机 概述 底部相机的位置不合适, 重新做了零件&#xff0c;准备先确定一下相机和吸嘴的距离是多少才合适。 如果在设备上直接实验&#xff0c;那么拆装调整相机挺麻烦的。 准备直接在电…

Spring 框架中常见的注解(Spring、SpringMVC、SpringBoot)

1. Spring 中常见注解 还有Recourse&#xff1a;相当于AutowiredQualifier Value : 用于将配置文件中的值注入到Bean的字段中。 Bean : 用于在配置类中声明一个Bean。 Lazy : 用于延迟加载Bean。 2. SpringMVC 中常见注解 还有GetMapping PostMapping PutMapping DeleteMapp…

掌握分布式系统的38个核心概念

天天说分布式分布式&#xff0c;那么我们是否知道什么是分布式&#xff0c;分布式会遇到什么问题&#xff0c;有哪些理论支撑&#xff0c;有哪些经典的应对方案&#xff0c;业界是如何设计并保证分布式系统的高可用呢&#xff1f; 1. 架构设计 这一节将从一些经典的开源系统架…

OpenAI 的 Whisper:盛名之下,其实难副?

OpenAI 的 Whisper&#xff1a;盛名之下&#xff0c;其实难副&#xff1f; Whisper 的崛起与承诺 严重缺陷的曝光 风险分析 应对措施 结论 在人工智能的浪潮中&#xff0c;OpenAI 一直以其创新性和强大的技术实力备受瞩目。然而&#xff0c;最近 OpenAI 的语音转写工具 Wh…

【MySQL】可重复读级别下基于Next Key Lock解决幻读

昨天读到了一篇文章[1]&#xff0c;里面讲&#xff0c;面试官说mysql的可重复读级别下有解决幻读的方式&#xff0c;最后公布了答案&#xff0c;是在sql后面加for update。这么说倒是没错&#xff0c;但是这种问法给我一种奇怪的感觉&#xff0c;因为for update无论在哪个隔离级…

Kaggle “Reducing Commercial Aviation Fatalities” 比赛 生理数据分析

1、背景 Kaggle在2018 年 12 月 20 日举办“Reducing Commercial Aviation Fatalities” 比赛&#xff0c;通过收集飞行员的生理数据&#xff0c;判断飞行员何时会遇到麻烦吗&#xff1f;该比赛主要分析飞行员的问题&#xff0c;因为航班多、时间不固定&#xff0c;飞行员会出…

Python 字符串类型中 ``split(“\n“)`` 与 ``splitlines()`` 方法的一些区别

最近在以 self.__print("#" * 20 "\n") 调用自己写的 __print 接口时发现打印的时候 "\n" 没有打出来&#xff0c;进而发现了 split("\n") 与 splitlines() 方法的一些区别。 一个是参数上&#xff0c;split 需要传递一个字符串作为…

开源库 FloatingActionButton

开源库FloatingActionButton Github:https://github.com/Clans/FloatingActionButton 这个库是在前面这个库android-floating-action-button的基础上修改的&#xff0c;增加了一些更强大和实用的特性。 特性&#xff1a; Android 5.0 以上点击会有水波纹效果 可以选择自定义…

““ 引用类型应用举例

#include <iostream> //使能cin(),cout(); #include <stdlib.h> //使能exit(); #include <iomanip> //使能setbase(),setfill(),setw(),setprecision(),setiosflags()和resetiosflags(); //setbase( char x )是设置输出数字的基数,如输出进制数则用se…

无人机避障——2D栅格地图pgm格式文件路径规划代码详解

代码和测试效果请看上一篇博客&#xff1a; 无人机避障——使用三维PCD点云生成的2D栅格地图PGM做路径规划-CSDN博客 更换模型文件.dae&#xff1a; 部分模型文件可以从这里下载&#xff1a; https://github.com/ethz-asl/rotors_simulator/wiki 将原先代码中的car.dae文件…

科研项目:利用AI大模型获得基金资助的10个原则

我是娜姐 迪娜学姐 &#xff0c;一个SCI医学期刊编辑&#xff0c;探索用AI工具提效论文写作和发表。 以ChatGPT为代表的大语言模型的诞生后&#xff0c;在学术界这些大模型LLM驱动的聊天机器人已经成为大家撰写和修订论文、基金申请书的流行工具。这些LLM经过千亿文本训练&…

CVE-2022-0185

这是一个关于整型溢出的CVE。 static int legacy_parse_param(struct fs_context *fc, struct fs_parameter *param) {struct legacy_fs_context *ctx fc->fs_private; // [1] ctx 与文件描述符相关unsigned int size ctx->data_size; // [2] size —— 目前已经写…

【Linux网络】TCP_Socket

目录 TCP协议&#xff08;传输控制协议&#xff09; listen状态 accept和connect TCP_echo_server (1)创建套接字 &#xff08;2&#xff09;绑定 &#xff08;3&#xff09;设置listen状态 &#xff08;4&#xff09;loop &#xff08;5&#xff09;客户端 多线程远程…

摄像机实时接入分析平台LiteAIServer视频智能分析软件视频诊断中的抖动检测功能

在现代社会中&#xff0c;视频监控系统扮演着至关重要的角色&#xff0c;而视频质量直接影响到监控系统的可靠性和有效性。随着技术的不断进步&#xff0c;视频智能分析软件LiteAIServer作为一款领先的视频智能分析软件&#xff0c;通过引入抖动检测功能&#xff0c;进一步提升…

Excel重新踩坑4:快捷键;逻辑函数;文本函数;日期相关函数;查找与引用函数;统计类函数;数组公式

0、excel常用快捷键 基础快捷键&#xff1a; alt&#xff1a;快速区域求和&#xff1b; ★ altenter&#xff1a;强制换行&#xff08;因为在excel单元格中没法用enter换行&#xff09;&#xff1b;altj&#xff1a;强制换行符的替换删除&#xff0c;这里altj就是在替换中输入…