笔记day5
文章目录
- 1 复习
- 2 最完美的解决方案,解决轮播图问题
- 3 开发Floor组件
- 4 把首页中的轮播图拆分为一个共用全局组件
- 5 search模块开发
1 复习
- 完成商品分类三级列表路由跳转一级路由传参(合并参数)
- 完成search模块中对于typeNav的使用(过渡动画)
- 对于typeNav请求次数也进行了优化(App.vue根组件)
- swiper插件:经常制作轮播图(移动端|PC端也可以使用)
使用步骤:
1)引入相应依赖包
2)页面中的结构务必要有
3)初始化swiper实例,给轮播图添加动态效果 - mock数据,通过mockjs模块实现的
2 最完美的解决方案,解决轮播图问题
var mySwiper = new Swiper ('.swiper-container', { //也可以传真实的DOM节点,document.querySelector('.swiper-container')//direction: 'vertical', // 垂直切换选项loop: true, // 循环模式选项// 如果需要分页器agination: {el: '.swiper-pagination',//点击小球时候切换图片clickable: true},// 如果需要前进后退按钮navigation: {nextEl: '.swiper-button-next',prevEl: '.swiper-button-prev',}
})
-
watch数据监听 + nextTick:监听已有数据的变化(仓库中的bannerList)
-
$nextTick:在下次DOM更新 循环结束之后 执行延迟回调,在 修改数据之后 立即使用这个方法,获取更新后的DOM
-
$nextTick:可以保证页面中的结构一定是有的,经常和很多插件一起使用【都需要DOM存在】
3 开发Floor组件
-
切记:仓库当中的state数据格式,不能乱写,数据格式取决于服务器返回的数据
-
getFloorList这个action在哪里触发,是需要在Home路由当中发的,不能在Floor组件内部发action,因为需要v-for遍历floor组件
-
v-for也可以在自定义标签中使用
-
组件通信方式有哪些?【面试频率极高】
- props:用于父子组件通信
- 自定义事件:$ on、$ emit 可以实现子给父通信
- 全局事件总线:$ bus,全能
- pubsub-js:vue中几乎不用,全能
- 插槽:默认插槽、具名插槽、作用域插槽
- vuex
4 把首页中的轮播图拆分为一个共用全局组件
- 切记:以后在开发项目的时候,如果看到某一个组件在很多地方都使用,就将其变成全局组件
- 注册一次,可以在任意地方使用,共用的组件|非路由组件放到components文件夹中
5 search模块开发
- 先写静态页面 + 静态组件拆分
- 发请求(API)
- Vuex(三连环)
- 组件获取仓库数据,动态展示数据
相关文章:
笔记day5
文章目录 1 复习2 最完美的解决方案,解决轮播图问题3 开发Floor组件4 把首页中的轮播图拆分为一个共用全局组件5 search模块开发 1 复习 完成商品分类三级列表路由跳转一级路由传参(合并参数)完成search模块中对于typeNav的使用(…...
Linux快速入门-兼期末快速复习使用
Linux快速入门-兼期末快速复习使用 一小时快速入门linux快速一:Linux操作系统概述1. Linux概述1.1 定义与特点1.2 起源与发展1.3 Linux结构1.4 版本类别1.5 应用和发展方向 2. 安装与启动2.1 Windows下VMware安装Linux2.2 安装Ubuntu 快速二:linux的桌面…...
浅谈文生图Stable Diffusion(SD)相关模型基础
1.U-Net模型基础 1.基础概念 UNet模型是一种基于卷积神经网络的图像分割算法,它采用了U型的网络结构,由编码器(下采样路径)和解码器(上采样路径)两部分组成。 编码器负责提取输入图像的特征,…...
Vivado使用VScode编译器
旧版Vivado使用Vscode编译器偶尔会出现VScode界面卡死的情况,在新版的Vivado中(我的是Vivado 2023.2),可以使用如下方式: 在设置中选择Text Editor,选择Custom Editor 在对话框中输入以下语句:…...
CEF127 编译指南 MacOS 篇 - 拉取 CEF 源码(五)
1. 引言 在完成了所有必要工具的安装和配置后,我们进入到获取 CEF 源码的阶段。对于 macOS 平台,CEF 的源码获取过程需要特别注意不同芯片架构(Intel 和 Apple Silicon)的区别以及版本管理。本文将详细介绍如何在 macOS 系统上获…...
Jenkins 中 写 shell 命令执行失败,检测失败问题
由于项目的 依赖复杂,随着版本的增多,人工操作,手误几率太大,我们选取kenins 来自动化发布、更新。 这里主要解决,发布 的 每个阶段,确保每个阶段执行成功。 比如: js 运行,…...
Java程序打包成exe,无Java环境也能运行
Java程序开发完成后,通常情况下以jar包的形式发布。但有时我们需要给非软件开发人员使用程序,如制作好窗体应用,把它发给没有java开发环境的人使用,此时就需要制作exe安装包。本文介绍如何将java程序制作成exe安装包,并…...
【java 正则表达式 笔记】
文章目录 快速入门匹配中文或数字或大小写字母(一个或多个) 正则表达式底层实现(重要)mather.find() 完成的任务mather.group(0) 分析 正则表达式基本语法元字符转义字符区分大小写限定字符选择匹配符特殊字符字符匹配符定位符 分组、捕获和反向引用捕获特别分组反向引用经典结…...
基于PWLCM混沌映射的麋鹿群优化算法(Elk herd optimizer,EHO)的多无人机协同路径规划,MATLAB代码
一、麋鹿群优化算法EHO 基本概念 麋鹿群优化算法(EHO,Elephant Herding Optimization)是2024年提出的一种启发式优化算法,它的灵感来自麋鹿群的繁殖过程。麋鹿有两个主要的繁殖季节:发情和产犊。在发情季节࿰…...
Vue2五、自定义指令,全局局部注册、指令的值 ,插槽--默认插槽,具名插槽 ( 作用域插槽)
一、自定义指令 使用步骤 1. 注册 (全局注册 或 局部注册) ,在 inserted 钩子函数中,配置指令dom逻辑 2. 标签上 v-指令名 使用 1、自定义指令(全局) Vue.directive("指令名",{ 指令的配置项 insert…...
Pika Labs技术浅析(五):商业智能技术
Pika Labs 的商业智能旨在通过联机分析处理(OLAP)和数据仓库(Data Warehouse)等技术,帮助企业用户高效地进行数据分析和决策支持。 一、商业智能技术模块概述 Pika Labs 的商业智能技术模块旨在通过集成数据仓库和联机…...
YOLO-World:Real-Time Open-Vocabulary Object Detection
目录 摘要 Abstract YOLO-World 1 模型架构 1.1 Text Encoder 1.2 YOLO Backbone 2 RepVL-PAN 2.1 T-CSPLayer 2.2 I-Pooling Attention 2.3 预测 3 消融实验 3.1 预训练数据 3.2 RepVL-PAN的消融实验 3.3 文本编码器 4 效果展示 4.1 零样本 4.2 根据词汇表检…...
Fastjson <= 1.2.47 反序列化漏洞复现
0x01 前言 Fastjson 是一个 Java 语言编写的高性能功能完善的 JSON 库,可以将 Java 对象转换为 JSON 格式,也可以将 JSON 字符串转换为 Java 对象,在中国和美国使用较为广泛。 0x02 漏洞成因 Fastjson < 1.2.68 版本在处理反序列化对象时…...
鸿蒙项目云捐助第二十一讲云捐助项目物联网IoT模拟器的使用
鸿蒙项目云捐助第二十一讲云捐助项目物联网IoT模拟器的使用 在前面的内容中,已经实现了云捐助物联网IoT的产品及设备设置,并且使用华为云Iot设备的在线调试工具进行命令下发的调试,这里也可以通过华为Iot物联网提供的MQTT模拟器进行连接。 …...
大数据技术原理与应用期末复习-知识点(二)
HBASE Hbase与传统关系数据库的对比分析 1.数据类型: 关系型数据库采用关系模型 Hbase采用更简单的数据模型(把数据存储为未经解释的字符串) 2.数据操作: 关系数据库:增删改查等 Hbase:插入 查询 删…...
高效准确的PDF解析工具,赋能企业非结构化数据治理
目录 准确性高:还原复杂版面元素 使用便捷:灵活适配场景 贴心服务:快速响应机制 在数据为王的时代浪潮中,企业数据治理已成为组织优化运营、提高竞争力的关键。随着数字化进程的加速,企业所积累的数据量呈爆炸式增长…...
C/C++ 数据结构与算法【栈和队列】 栈+队列详细解析【日常学习,考研必备】带图+详细代码
一、介绍 栈和队列是限定插入和删除只能在表的“端点”进行的线性表,是线性表的子集,是插入和删除位置受限的线性表。 (操作受限的线性表) 二、栈 1)概念: 栈(stack)是一个特殊的线性表,是限…...
读书笔记~管理修炼-缄默效应
缄默效应:学会正确批评下属 员工明明犯了错误,却不及时告知你,总是拖到最后一刻无法弥补时才不得不承认出了问题——你遇到过这样的问题吗? 这其实是缄默效应在发挥作用。 在职场中,即使再扁平化的环境&…...
视频会议系统会前预约模块必须包含哪些功能?
视频会议系统会前预约模块必须包含哪些功能? 视频会议系统的会前预约模块是企业高效管理会议资源、提升会议效率的重要工具。一个完善的会前预约模块必须包含一系列功能,以确保会议的顺利进行和资源的合理分配。以下是对视频会议系统会前预约模块必须包…...
RabbitMQ中的Topic模式
在现代分布式系统中,消息队列(Message Queue)是实现异步通信、解耦系统组件的重要工具。RabbitMQ 是一个广泛使用的开源消息代理,支持多种消息传递模式,其中 Topic 模式 是一种灵活且强大的模式,允许生产者…...
开源工具TranslucentTB启动错误0x800401E3完整解决方案
开源工具TranslucentTB启动错误0x800401E3完整解决方案 【免费下载链接】TranslucentTB A lightweight utility that makes the Windows taskbar translucent/transparent. 项目地址: https://gitcode.com/gh_mirrors/tr/TranslucentTB TranslucentTB是一款广受欢迎的Wi…...
前端开发者的福音:5分钟用Mergely.js给你的网页加个在线文本对比器
零成本打造专业级文本对比工具:Mergely.js全攻略 在代码审查、合同修订或是配置管理场景中,文本差异对比是个高频刚需。传统方案要么需要后端支持,要么功能简陋。现在,只需5分钟和几行JavaScript代码,你就能为Web项目嵌…...
LibreCAD:完全免费的2D CAD软件终极指南,告别昂贵许可证
LibreCAD:完全免费的2D CAD软件终极指南,告别昂贵许可证 【免费下载链接】LibreCAD LibreCAD is a cross-platform 2D CAD program written in C17. It can read DXF/DWG files and can write DXF/PDF/SVG files. It supports point/line/circle/ellipse…...
VisualGDB跨平台调试避坑指南:用VS远程调试Linux程序(2023最新版配置)
VisualGDB跨平台调试实战:2023年VS远程开发Linux程序避坑指南 当Visual Studio开发者首次尝试在Linux环境下进行C开发时,往往会面临调试工具链断裂的困境。传统的gdb命令行调试方式与Windows开发者熟悉的图形化调试体验存在巨大鸿沟,而Visual…...
Linux进程调度机制与性能优化实践
1. Linux进程调度概述在Linux操作系统中,进程调度是内核最核心的功能之一。作为一个多任务操作系统,Linux需要合理地分配有限的CPU资源给众多进程,使它们能够高效、公平地运行。理解Linux的调度机制,对于系统性能调优、应用开发以…...
YOLOv12镜像应用案例:如何快速构建自动驾驶感知原型系统
YOLOv12镜像应用案例:如何快速构建自动驾驶感知原型系统 1. 自动驾驶感知系统的技术挑战 自动驾驶技术正在重塑交通出行的未来,而感知系统作为"车辆的眼睛",其性能直接影响整个系统的安全性和可靠性。传统方案面临三大核心挑战&a…...
告别电量焦虑:能源之星X如何让Windows笔记本续航轻松翻倍
告别电量焦虑:能源之星X如何让Windows笔记本续航轻松翻倍 【免费下载链接】EnergyStarX 🔋 Improve your Windows 11 devices battery life. A WinUI 3 GUI for https://github.com/imbushuo/EnergyStar. 项目地址: https://gitcode.com/gh_mirrors/en…...
YOLOv8 Face:从技术原理到生产级人脸检测系统构建指南
YOLOv8 Face:从技术原理到生产级人脸检测系统构建指南 【免费下载链接】yolo-face YOLO Face 🚀 in PyTorch 项目地址: https://gitcode.com/gh_mirrors/yo/yolo-face 在当今计算机视觉领域,实时人脸检测技术已成为智能交互、安全监控…...
Honey Select 2终极增强补丁:3分钟快速配置完整模组生态
Honey Select 2终极增强补丁:3分钟快速配置完整模组生态 【免费下载链接】HS2-HF_Patch Automatically translate, uncensor and update HoneySelect2! 项目地址: https://gitcode.com/gh_mirrors/hs/HS2-HF_Patch 你是否曾为《Honey Select 2》的模组安装繁…...
从CNN到Mamba:为什么这个轻量级双分支结构在医学图像分类中表现更好?
从CNN到Mamba:轻量级双分支结构如何重塑医学图像分类范式 医学影像分析正面临前所未有的挑战——随着CT、MRI、超声等成像技术的普及,每天产生的医学图像数据呈指数级增长。传统CNN架构在应对高分辨率医学图像时,往往陷入局部特征提取的局限&…...
