Vue3学习第二天记录

Vue3学习第二天记录

  • 背景
  • 说明
  • 截图记录
    • 一个简单的JS文件
    • Vue3的watch()函数
    • Vue3的toRef()/toRefs()函数
    • 前端数据类型的分类
    • 前端写一个对外暴露的函数
    • 前端的...语法
    • Vue3中watch()函数的总结
    • Vue3中watchEffect()函数
    • Vue3中watch()函数的坑
    • Vue3中computed()函数

背景

最近在学习尚硅谷的Vue2的入门课程, 后面也在Vue2的基础上介绍了一下Vue3, 这里简单做一个记录.

说明

个人学习笔记, 算是自己的一个简单的交付件, 可能对别人用处不大.

截图记录

一下是学习记录中的一些截图记录. 可能是当时有有点灵感. 后续也需要多多复习一下.

一个简单的JS文件

感觉就像一个非常简单的方法, 调用方只需要 userPoint() 就可以了, 非常简单. 但是实际项目中应该不会这样吧!
在这里插入图片描述

Vue3的watch()函数

有很多种场景, 具体用到的时候不妨再去查阅资料, 问问GPT
在这里插入图片描述

Vue3的toRef()/toRefs()函数

这里不能直接用ref(), 使用ref()其实是直接返回一个 RefImpl 的对象, 与上面的数据就是隔离开来的了.
在这里插入图片描述

前端数据类型的分类

总感觉前端的分类是: 基本数据类型, 普通对象, 数组.
但是在Java中就只有两类: 8大基本数据类型和引用数据类型
在这里插入图片描述

前端写一个对外暴露的函数

这个可以简写, 直接 export default function() {…}
使用默认暴露, 像是一个匿名函数.
在这里插入图片描述

前端的…语法

也是前端的基本功, 感觉是在解构一个对象. 把对象里面的属性都解构出来.
在这里插入图片描述

Vue3中watch()函数的总结

主要就监控属性, 笔记中老师列举了尽量多的场景, 这里留一个印象, 需要使用的时候再去深究.
在这里插入图片描述

Vue3中watchEffect()函数

这个函数就是, 你用到哪个属性我就去监视哪个属性.
直译过来感觉是: 起作用/生效的时候去监视.
在这里插入图片描述

Vue3中watch()函数的坑

老师讲解的版本中, watch()函数这个场景下不能正确获取oldValue
在这里插入图片描述

Vue3中computed()函数

和Vue2中computed配置功能是一样的.
在这里插入图片描述

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

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

相关文章

Vue2入门(安装Vue、devtools,创建Vue)以及MVVM分层思想

文章目录 1.下载并安装Vue2.使用Vue2.1 创建Vue以及挂载Vue2.2 模板语句的数据来源:data2.3 template配置项详解2.4 Vue实例和容器的关系 3.安装devtools4.MVVM分层思想5.通过vm可以访问哪些属性 1.下载并安装Vue (1)Vue是一个基于JavaScrip…

搭建高可用k8s

高可用只针对于api-server,需要用到nginx keepalived,nginx提供4层负载,keepalived提供vip(虚拟IP) 系统采用openEuler 22.03 LTS 1. 前期准备 因为机器内存只有16G,所有我采用3master 1node 1.1 修改主机配置(所有节…

扩散模型会成为深度学习的下一个前沿领域吗?

文章目录 一、说明二、 第 1 部分:了解扩散模型2.1 什么是扩散模型2.2 正向扩散2.3 反向扩散 三、他们的高成本四、扩散模型的用处五、为什么扩散模型如此出色六、第 2 部分:使用扩散模型生成6.1 用于自然语言处理和 LLM 的文本扩散6.2 音频视频生成6.3 …

下载安装Thonny并烧录MicroPython固件至ESP32

Thonny介绍 一、Thonny的基本特点 面向初学者:Thonny的设计初衷是为了帮助Python初学者更轻松、更快速地入门编程。它提供了直观易懂的用户界面和丰富的功能,降低了编程的门槛。轻量级:作为一款轻量级的IDE,Thonny不会占用过多的…

RDK X3(aarch64) 测试激光雷达思岚A1

0. 环境 - 亚博智能的ROSMASTER-X3 - RDK X3 1.0 0.1 资料 文档资料 https://www.slamtec.com/cn/Support#rplidar-a-series SDK https://github.com/slamtec/rplidar_sdk ROS https://github.com/slamtec/rplidar_ros https://github.com/Slamtec/sllidar_ros2 1. robostu…

NestJs Prisma常见问题(避坑指南)

关联模型操作 查询子模型多对一情况下,不需要include被关联模型也能查出自己外键id多对一模型新增数据时,被关联的外键传值,如果model配置的外键为非必填(?),创建将会报错,多对一不能将外键设置为空持久化数据到数据…

SpringBoot实现上传头像(查看头像)

SpringBoot实现上传头像给功能和查看头像功能 文章目录 目录 文章目录 1.上传头像 1.这里的AppConfig记得定义一下 2.引入AppConfig 3.上传文件代码 2.获取头像 1.实现readFile方法 1.上传头像 首先我的代码中在application.properties中设置了上传文件的根目录 project.folder…

1310. 子数组异或查询 异或 前缀和 python

有一个正整数数组 arr,现给你一个对应的查询数组 queries,其中 queries[i] [Li, Ri]。 对于每个查询 i,请你计算从 Li 到 Ri 的 XOR 值(即 arr[Li] xor arr[Li1] xor ... xor arr[Ri])作为本次查询的结果。 并返回一…

CPASSOC代码详解

加载环境 library("MASS") require(MASS) # Modern Applied Statistics with S,"S"指的是S语言,由贝尔实验室的约翰钱伯斯(John Chambers)等人开发。S语言是R语言的前身,许多R语言的语法和功能都…

《精通ChatGPT:从入门到大师的Prompt指南》附录B:推荐阅读资源

作者:斯图尔特拉塞尔 (Stuart Russell) 和 彼得诺维格 (Peter Norvig) 简介:这本书被誉为人工智能领域的经典教材,内容涵盖了AI的基本原理、算法及其应用。无论是入门者还是专业研究者,都能从中获得启发。 2. 《深度学习》 作者…

【目标跟踪网络训练 Market-1501 数据集】DeepSort 训练自己的跟踪网络模型

前言 Deepsort之所以可以大量避免IDSwitch,是因为Deepsort算法中特征提取网络可以将目标检测框中的特征提取出来并保存,在目标被遮挡后又从新出现后,利用前后的特征对比可以将遮挡的后又出现的目标和遮挡之前的追踪的目标重新找到&#xff0…

企业网页制作

随着互联网的普及,企业网站已成为企业展示自己形象、吸引潜在客户、开拓新市场的重要方式。而企业网页制作则是构建企业网站的基础工作,它的质量和效率对于企业网站的成败至关重要。 首先,企业网页制作需要根据企业的特点和需求进行规划。在网…

前端 移动端 手机调试 (超简单,超有效 !)

背景:webpack工具构建下的vue项目 1. 找出电脑的ipv4地址 2. 替换 host 3. 手机连接电脑热点或者同一个wifi 。浏览器打开链接即可。

Spring运维之业务层测试数据回滚以及设置测试的随机用例

业务层测试数据回滚 我们之前在写dao层 测试的时候 如果执行到这边的代码 会在数据库 里面留下数据 运行一次留一次数据 开发有开发数据库,运行有运行数据库 我们先连数据库 在pom文件里引入mysql的驱动和mybatis-plus的依赖 在数据层写接口 用mybatis-plus进…

浅谈JDBC

文章目录 一、什么是 JDBC?二、JDBC 操作流程三、JDBC代码例子 一、什么是 JDBC? JDBC是一种可用于执行SQL语句的JAVA API,是链接数据库和JAVA应用程序的纽带。JDBC一般需要进行3个步骤:与数据库建立一个链接、向数据库发送SQL语…

当AGI能够自我复制并传播到任意电脑时,会怎样?

当人工通用智能(AGI)具备自我复制能力,并能够传播到任何一台计算机作为宿主机时,这种情景可能带来一系列深远的影响和挑战。以下是一些潜在的影响和可能的结果: 1. 安全威胁与恶意利用 AGI的自我复制和传播能力可能被…

openh264 场景变化检测算法源码分析

文件位置 openh264/codec/processing/scenechangedetection/SceneChangeDetection.cppopenh264/codec/processing/scenechangedetection/SceneChangeDetection.h 代码流程 说明: 通过代码流程分析,当METHOD_SCENE_CHANGE_DETECTION_SCREEN场景类型为时…

Web前端工资调整:深入剖析与全面解读

Web前端工资调整:深入剖析与全面解读 在快速发展的互联网行业中,Web前端技术日新月异,而与之紧密相关的工资调整也成为了业内热议的话题。本文将从四个方面、五个方面、六个方面和七个方面,深入剖析Web前端工资调整的原因、趋势、…

Linux -- 了解 vim

目录 vim Linux 怎么编写代码? 了解 vim 的模式 什么是命令模式? 命令模式下 vim 的快捷键: 光标定位: 复制粘贴: 删除及撤销: 注释代码: 什么是底行模式? ​编辑 ​编辑…

Java:111-SpringMVC的底层原理(中篇)

这里续写上一章博客(110章博客): 现在我们来学习一下高级的技术,前面的mvc知识,我们基本可以在67章博客及其后面相关的博客可以学习到,现在开始学习精髓: Spring MVC 高级技术: …