Vue3阶段前置知识

目录

1.数组元素操作

2.对象的操作

3.变量和常量

4.模版字符串

4.1模版和普通的比较

4.2优点一的对比

4.3优点二的对比

5.对象的取值

5.1两个取值方法

5.2对象的简写

6.解构赋值

6.1数组的解构

6.2对象的解构

6.3二重解构

7.箭头函数

7.1函数总结

7.2三个特性

7.3一个应用


1.数组元素操作

push向这个数组里面添加新的元素;

log是进行这个数组内容的打印;

shift删除的就是这个数组里面的第一个元素;

2.对象的操作

opt是一个对象;

opt.birth是对于这个对象的属性进行添加;

opt.age是对于这个对象里面的属性值进行修改;

3.变量和常量

使用let这个关键字进行变量的定义,使用const这个关键字进行常量的定义;

4.模版字符串

4.1模版和普通的比较

我们普通的字符串就是使用的这个双引号进行表示的,但是这个模版字符串使用的就是反引号进行表示的;

4.2优点一的对比

模版的好处之一就是支持换行,即在下面的这个情况下,我们的普通的字符串换行的时候就会报错,但是我们的模版字符串不会;

换行之后,我们的这个整体的布局就可以自由的被我们进行控制和操作;

4.3优点二的对比

就是可以进行这个表达式的嵌入,我们的变量也是表达式,表达式进行嵌入的时候需要加上这个${}其中这个括号里面就是我们嵌入的这个表达式的名字;

下面的这个是嵌入了三个表达式,一个是我们的name,一个就是age变量,还有一个就是我们的三目表达式;

但是对于这个普通的表达式,想要达到这个效果,就必须要使用这个+进行字符串的拼接,相比之下这个表达式的嵌入就很有优势;

5.对象的取值

5.1两个取值方法

我们支持点取值和括号取值两个方式,一般情况下两个都是通用的,但是当我们的属性的名字是字符串的时候,我们只可以使用中括号进行这个取值,不可以使用点取值;

5.2对象的简写

当我们的对象的属性的名字和这个属性对应的值的名字是一样的,这个时候我们可以进行这个对象的简写,这个情景经常结合我们的变量进行使用;

6.解构赋值

6.1数组的解构

数组的解构就是把我们的数组里面的元素分隔开,可以进行一次性的赋值;

6.2对象的解构

对象的结构实际上是进行了这个对象的简写,就是因为我们的对象的属性和对应的属性值的姓名是一样的,我在这个代码里面也是把这个不省略的情景写了出来,在这个场景之下,我们的属性和属性值的名字就是一样的;

在进行赋值的时候,如果我们的系统在这个大括号里面找到了这个属性值,就会把我们的对象里面的这个内容赋值给这个对应的属性值,因此这个对象主要就是要找到属性,因此这个顺序是可以变换的,这个也是和上面的数组的一个区别,数组里面的这个顺序是不可以变化的,否则这个赋值的时候就会出现问题;

下面的这个就是部分进行赋值,这个时候还是和我们的数组一样,就是把这个需要赋值的写出来,不需要的就不用写,同理这个剩余的多个变量进行赋值的时候也是使用的rest和三个点的方法;

当这个属性值的名字和属性不相同的时候,我们就不可以进行简写,而是需要把这个属性和属性值全部写出来,下面也有一个案例;

6.3二重解构

就是当我们的对象里面嵌套了一个数组的时候,我们想要对于这个数组里面的属性进行赋值的操作,这个时候,我们就需要进行二重的析构:即先解构一次把这个数组搞出来,在按照上面的这个方法进行数组的解构;

7.箭头函数

7.1函数总结

箭头函数是对于之前的函数的简化

7.2三个特性

当我们的参数只有一个的时候,可以省略这个括号,就是我们的这个arg就是这个函数的参数,因为只有一个,这个括号我们可以省略,也可以不省略;

第二个特性就是我们的这个函数体只有一句话的时候,我们可以省略这个大括号,而且这个时候会自动进行返回,不需要我们自己去写这个返回值;

第三个就是这个返回值如果是一个对象,这个时候我们的这个对象就是这个函数的返回值,我们为了防止误解,这个时候我们在这个大括号的外面加上小括号,告诉这个系统我们的这个大括号里面的这个内容就是我们要返回的全部分内容,否则这个解释器就会认为我们的这个大括号就是这个函数提的这个大括号,加上小括号之后就是明确的告诉这个解释器我们的这个括号里面的所有的内容就是我们的函数返回值;

7.3一个应用

这个里面的这个settimeout函数就是利用这个时间延迟进行这个数据的打印,我们原来可能需要调用这个func这个函数,现在可以使用我们的箭头函数进行替代即可;

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

如若内容造成侵权/违法违规/事实不符,请联系一条长河网进行投诉反馈,一经查实,立即删除!

相关文章

数学建模--什么是数学建模?数学建模应该怎么准备?

前言 这是去年底学数学建模老哥的建模课程笔记;未来本人将陆陆续续的更新数学建模相关的一些基础算法,大家可以持续关注一下;提示:数学建模只有实战才能提升,光学算法没有啥意义,也很难学的很懂。 文章目录…

项目学习笔记

Downloads – Oracle VirtualBoxhttps://www.virtualbox.org/wiki/Downloads

初识C语言(四)

目录 前言 十一、常见关键字(补充) (1)register —寄存器 (2)typedef类型重命名 (3)static静态的 1、修饰局部变量 2、修饰全局变量 3、修饰函数 十二、#define定义常量和宏…

通过人工智能AI大模型定制的完美旅游行程

人工智能在购票与乘车体验优化方面发挥着重要作用,通过智能技术的应用,不仅提升了购票效率,还改善了乘车体验。以下是人工智能赋能购票与乘车体验优化的具体表现: 一、购票体验优化 智能推荐系统: 购票平台如12306利…

《深度学习》OpenCV 指纹验证、识别

目录 一、指纹验证 1、什么是指纹验证 2、步骤 1)图像采集 2)图像预处理 3)特征提取 4)特征匹配 5)相似度比较 6)结果输出 二、案例实现 1、完整代码 2、实现结果 调试模式: 三、…

06.C/C++内存管理

在这里C的内存管理相较于C作出了许多升级,下面我们就来了解一下。 1.C/C内存分布 我们先来看一下下面的问题,温习一下C的内存分布 int globalVar 1; static int staticGlobalVar 1; void Test() {static int staticVar 1;int localVar 1;int num1…

Matlab进阶绘图第70期—正负面积图

正负面积图是指通过一条水平线将一条曲线分割为上下两部分,并分别填充不同的颜色,用以表示不同的类别属性。 由于Matlab中未收录的正负面积图的绘制方法,因此需要大家自行解决。 本文利用自己制作的PNarea工具,进行正负面积图的…

《程序猿之Redis缓存实战 · Redis 与数据库一致性》

📢 大家好,我是 【战神刘玉栋】,有10多年的研发经验,致力于前后端技术栈的知识沉淀和传播。 💗 🌻 CSDN入驻不久,希望大家多多支持,后续会继续提升文章质量,绝不滥竽充数…

【Android 源码分析】Activity短暂的一生 -- 目录篇 (持续更新)

1. 前言 忽然有一天,我想要做一件事:去代码中去验证那些曾经被“灌输”的理论。                                                                                  …

springboot厨房达人美食分享平台(源码+文档+调试+答疑)

文章目录 前言一、主要技术?二、项目内容1.整体介绍(示范)2.运行截图3.部分代码介绍 总结更多项目 前言 厨房达人美食分享平台的目的是让使用者可以更方便的将人、设备和场景更立体的连接在一起。能让用户以更科幻的方式使用产品&#xff0c…

【车载开发系列】ParaSoft单元测试环境配置(四)

【车载开发系列】ParaSoft单元测试环境配置(四) 【车载开发系列】ParaSoft单元测试环境配置(四) 【车载开发系列】ParaSoft单元测试环境配置(四)一. 如何设置过滤二. 如何设置静态扫描的规则三. 如何设置单…

Linux操作系统中Redis

1、什么是Redis Redis(Remote Dictionary Server ),即远程字典服务,是一个开源的使用ANSIC语言编写、支持网络、可基于内存亦可持久化的日志型、Key-Value数据库,并提供多种语言的API。 可以理解成一个大容量的map。…

IPS和IDS分别适用于哪些网络环境和安全需求

IPS即入侵防御系统和IDS即入侵检测系统是网络安全中的重要工具。 IPS适用于企业内部网络、数据中心以及云环境等网络环境中。 在企业内部网络中,特别是关键业务系统和数据中心的防护。IPS能够实时监控网络流量、识别和阻止潜在的恶意攻击,如DDoS攻击、SQ…

针对考研的C语言学习(定制化快速掌握重点5)

顺序表 特点: 写代码主要就是增删改查!!! 写代码的边界性非常重要以及考研插入和删除的位置都是从1开始,而数组下标是从0开始 【注】下标和位置的关系 线性表最重要的是插入和删除会涉及边界问题以及判断是否合法 …

nginx的安装和使用

源码安装 1.环境准备:卸载其他方式安装的web应用,防止端口冲突 2.下载nginx源码包 wget https://nginx.org/download/nginx-1.20.2.tar.gz 3.源码编译安装 yum install -y gcc pcre-devel zlib-devel #安装依赖包 useradd -M -s /sbin/nologin ngi…

资质申请中常见的错误有哪些?

在申请建筑资质的过程中,企业可能会犯一些常见的错误,以下是一些需要避免的错误: 1. 资料准备不充分: 申请资质需要提交大量的资料,包括企业法人资料、财务报表、业绩证明等。资料不齐全或不准确都可能导致申请失败。…

RXE RDMA测试学习环境搭建

测试环境信息 在ubuntu20.04.6 LTS (Focal Fossa)上建立RXE学习环境。 安装工具和依赖 sudo apt install automake libtool sudo apt install libibverbs-dev libibmad-dev librdmacm-dev libibumad-dev libpci-dev sudo apt-get install libibverbs1 ibverbs-utils librdmac…

【AI论文精读1】针对知识密集型NLP任务的检索增强生成(RAG原始论文)

目录 一、简介一句话简介作者、引用数、时间论文地址开源代码地址 二、摘要三、引言四、整体架构(用一个例子来阐明)场景例子:核心点: 五、方法 (架构各部分详解)5.1 模型1. RAG-Sequence Model2. RAG-Toke…

Python:Pip包的安装与原理(Windows系统)

相关内容 Pythonhttps://blog.csdn.net/weixin_45791458/category_12403403.html?spm1001.2014.3001.5482 pip是Python的包管理工具,用于安装、升级和卸载Python包和依赖。它的全称是“Pip Installs Packages”,是Python生态系统中的标准包管理器。pip…

02Cesium中常用的鼠标事件

文章目录 02Cesium中常用的鼠标事件1、左键单击事件2、左键双击事件3、左键按下事件4、左键弹起事件5、中键按下事件6、中键弹起事件7、鼠标移动事件8、右键单击事件9、右键按下事件10、右键弹起事件11、鼠标滚轮事件具体在代码中的应用如下所示 02Cesium中常用的鼠标事件 Ces…