最新版本vue3+vite重构尚品汇(解决接口问题)第21-50集

news2024/12/26 22:54:04

第21集,第22集:照敲就行,引入概念。
第23集:防抖概念:前面所有的触发被取消,最后一次执行在规定的时间之后才会触发,只会执行一次。Lodash插件里面封装了函数的防抖和节流的业务。用到lodash确实比硅谷外卖新很多。学到了,.debounce.
第24集:节流概念:在规定的间隔时间范围内不会重复触发回调,只有大于这个时间间隔才会触发回调,把频繁触发改为少量触发。
.throttle.
第25集,第26集,第27集:这一集有个要注意的是html中的自定义属性data-后面的无视大小写,如果想让它在js中大写的话要加-,其它的还好,vue3里面路由传空串路由也不会出错。声明式导航会创造很多的实例导致性能损耗。
第29集:这里vue3的话在less里给.sort-enter加个from,可能是vue3的写法吧,不去深究。
第30集:这集这个优化挺重要的,
第32集:mockjs还是在前端拦截ajax模拟服务器接口的。在项目中拿mock文件夹来装。还有个知识点,‘/images/banner1.jpg’前面的这个/是服务器的根目录,是相对于html来说的,因为其他的js和vue组件都是挂载到它身上的。把mock数据需要的图片放在public文件夹中,图片和json在vite这些构建工具中都是默认对外暴露的。
第34集:我们直接用最新的Swiper8,创造Swiper前页面中的结构必须存在,swiper8里用.swiper不用.swiper-container
第35集:这个setTimeout我自己写也会首先想到。Swiper8小圆点不显示,这个也不是重点,能用就行。
第38集:这个知识点很重要,请求不在该组件中传递,接收到参数时组件结构已经渲染好了。
第39集:主要是一个拆分全局组件的思想,全局组件的注册跟之前的vue3写法一样。
第40集:有一些小细节,就是老师视频里经常会对一些组件名大小写进行修改但没有讲解,所以一集一集理解着过还好,如果不写复制就会出错,在vuecli里.vue后缀可以不写,我们用vite需要补全,既然我们不用默认的index.vue我们可以把名字改成类似Search.vue这样的易于理解。
第41集:哈哈哈哈哈,本来以为自己是学霸,结果遇到问题还是弹幕给我解答,这里照着写好后并不会发请求,而是在跳转到search组件后里面的mounted才会生效(简单说来就是要点击页面上的搜索才行),还以为是接口问题。。。接口是可以正常使用的,代码一模一样。
第45集: r o u t e 不用加 t h i s ,这是 w a t c h 里的。接口的问题和之前的一样。第 47 集: v u e 3 取消了全局事件总线,要使用 route不用加this,这是watch里的。接口的问题和之前的一样。 第47集:vue3取消了全局事件总线,要使用 route不用加this,这是watch里的。接口的问题和之前的一样。第47集:vue3取消了全局事件总线,要使用bus要安装mitt和tiny-emitter,现在vuex都快被pinia取代了,老师用$bus就是想加深大家印象,我们直接用vuex就行了。大概意思就是search组件传递一个clear事件让header组件将它的keyword清空,先传递事件,
在这里插入图片描述

然后在Home组件的vuex中
在这里插入图片描述

最后在组件中监听state并修改数值,
在这里插入图片描述

这里要加.home来区分不同模块。试过以后发现这样的话多次跳转监听不到,把上面的代码稍微改一下,每次state.changeKeyword取反,再把if(newValue===true)去掉。只要不加immediate执行第一次,就好了。其它的跟着老师写就好了。
第48集:这一集如果trandemark设为undefined的话,上面就用v-if不要用v-show了,不然结构还存在读取undefined的split方法会报错。
第50集:接口还是可以使用的,照着写就行了。

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

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

相关文章

SpringAOP——基础知识

AOP AOP全称是Aspect Oriented Programming 即面向切面编程,是对一类统一事务的集中处理 例如,我们的网页许多地方都需要进行登陆验证,这时就需要在很多地方添加重复的验证代码,而AOP可以集中配置需要登陆验证的地方,…

简单认识: 数据库 zhi 操作(MySQL为例)

目录 前言 一,库 二,站在巨人的肩膀上理解 库 的操作 下节预告: 前言 今天是库库森日记第n……篇之数据库篇一 库 库 库~~~~的~操~作。 如果看完这篇文章,你觉得数据库从简单的创建库,表,修改…

世界那么大,你哪都别去了,来我带你了解CSS3 (一)

文章目录‍❤️‍🔥CSS简介‍‍‍‍❤️‍🔥CSS选择器❣️选择器一❣️选择器二❣️关系选择器‍❤️‍🔥CSS属性❣️字体属性❣️背景属性❣️文本属性❣️表格属性‍❤️‍🔥CSS简介 CSS概念 CSS(Cascading Style Sh…

JWT续期问题,ChatGPT解决方案

JWT(JSON Web Token)通常是在用户登录后签发的,用于验证用户身份和授权。JWT 的有效期限(或称“过期时间”)通常是一段时间(例如1小时),过期后用户需要重新登录以获取新的JWT。然而&…

数据结构基础之链表

目录 前言 1、什么是链表 2、添加元素 3、虚拟头结点 4、查询&修改元素 5、删除元素 附:完整代码 前言 又到周末了,修整了一天,继续来写点东西吧,今天,我们来学习数据结构中的另一种基础的数据结构——链表…

jsp进阶

文章目录jsp进阶内容回顾JSP 的九大内置对象内置对象的创建九大内置对象详解四大作用域对象四大作用域范围总结EL 进阶JSTL 标准标签库JSTL 核心标签jsp进阶 内容回顾 jsp 创建 jsp 的工作原理:翻译 --> 编译 --> 运行 翻译:第一次访问 jsp 页面…

Redis简单笔记

1 为什么需要Redis 数据分冷热,将热数据存储到内存中 2 Redis应用案例 2.1 连续签到 2.1.1 String数据结构 可以存储字符串、数字、二进制数据通常和expire配合使用场景:存储计数、Session2.2 消息通知 用list作为消息队列 使用场景:消息通知。 例如当文章更新时…

机器学习模型的可解释性算法汇总!

模型可解释性汇总简 介目前很多机器学习模型可以做出非常好的预测,但是它们并不能很好地解释他们是如何进行预测的,很多数据科学家都很难知晓为什么该算法会得到这样的预测结果。这是非常致命的,因为如果我们无法知道某个算法是如何进行预测&…

巴别塔——问答平台调研

项目内容这个作业属于哪个课程2023 年北航软件工程这个作业的要求在哪里个人作业-软件案例分析我在这个课程的目标是了解软件工程的方法论、获得软件项目开发的实践经验、构建一个具有我的气息的艺术品这个作业在哪个具体方面帮助我实现目标对于“程序员是什么”这个问题有了一…

【ChatAug: Leveraging ChatGPT for Text Data Augmentation 论文精读】

ChatAug: Leveraging ChatGPT for Text Data Augmentation 论文精读InformationAbstract1 Introduction2 RELATED WORK2.1 Data Augmentation2.2 Few-shot Learning2.3 Very Large Language Models2.4 ChatGPT: Present and Future3 DATASET3.1 Symptoms Dataset3.2 PubMed20k …

Qt扫盲-CMake 使用概述

CMake 使用概述一、概述二、创建Qt CMake 项目三、简单介绍1. 引入Qt的库2.Qt CMake 引入第三方库3. Qt CMake 项目目录四、使用案例一、概述 CMake是一个简化跨不同平台开发项目的构建过程的工具。对C来说其实就是生成一个文件,文件里面描述了,怎么组织…

【MyBatis】MyBatis操作数据库

MyBatis操作数据库 文章目录MyBatis操作数据库:one:什么是MyBatis:two:创建SSM项目引入依赖配置文件设置MyBatis底层逻辑:three:实现CRUD功能查询全列查询带参数的查询新增获取自增主键删除更新:four:参数占位符:#{}和${}不支持String参数问题${}使用场景&#xff1…

javascript的ajax

学什么Ajax基础JSON跨域XHR对象Ajax进阶Ajax应用Ajax扩展Ajax基础初识 AjaxAjax的基本用法GET请求POST请求JSON初识JSONJSON的3种形式JSON的常用方法跨域初识跨域CORS跨域资源共享JSONPXHR 对象XHR的属性XHR的方法XHR的事件Ajax进阶FormData封装Ajax使用Promise改造封装好的Aja…

Linux 进程:进程退出返回值的获取

目录一、对输出参数status的理解二、获取进程退出返回值1.位运算(1)异常退出码(2)进程返回值2.宏函数我们常使用函数 wait 和 waitpid 来执行进程等待的功能:处理退出的子进程并释放资源,防止子进程变成僵尸进程。而这两个函数都有一个输出参数status&am…

【LeetCode】第 99 场双周赛

1. 最小和分割 给你一个二维整数数组 ranges ,其中 ranges[i] [starti, endi] 表示 starti 到 endi 之间(包括二者)的所有整数都包含在第 i 个区间中。 你需要将 ranges 分成 两个 组(可以为空),满足&am…

单板TVS接地不当造成辐射骚扰超标问题分析-EMC

【摘要】 某产品EMC辐射骚扰测试超标,通过近远场扫描配合定位分析,逐步找出骚扰源、传播路径,最终通过修改 PCB 走线切断传播路径解决此问题。 1 故障现象 某产品在进行 EMC 研发摸底测试时发现,整机辐射骚扰垂直方向测试超标&a…

Cesium实现的光柱效果

Cesium实现的光柱效果 效果展示: 可以通过拼接两个entity来实现这个效果: 全部代码; index.html <!DOCTYPE html> <html><head><meta charset

HBase写入流程详解

HBase采用LSM树架构&#xff0c;天生适用于写多读少的应用场景。在真实生产线环境中&#xff0c;也正是因为HBase集群出色的写入能力&#xff0c;才能支持当下很多数据激增的业务。需要说明的是&#xff0c;HBase服务端并没有提供update、delete接口&#xff0c;HBase中对数据的…

C++实战md5、base64算法实现(附源码)

C++常用功能源码系列 文章目录 C++常用功能源码系列前言一、常用加密算法1. md5是什么二、源码1. md52. base64、decode总结前言 本文是C/C++常用功能代码封装专栏的导航贴。部分来源于实战项目中的部分功能提炼,希望能够达到你在自己的项目中拿来就用的效果,这样更好的服务…

WebStorm + JetBrains IDE Support 实现自动刷新功能

找了半天&#xff0c;还借了朋友一个vpn,然后发现&#xff1a; JetBrains IDE Support已经下架&#xff1a; 关于插件JetBrains IDE Support在chrome商店中消失_webstorm启动chrome没有插件_kesin_lee的博客-CSDN博客 在写Html网页时&#xff0c;参考WebStrom说明文档&#xf…