当前位置: 首页 > news >正文

笔记day5

文章目录

  • 1 复习
  • 2 最完美的解决方案,解决轮播图问题
  • 3 开发Floor组件
  • 4 把首页中的轮播图拆分为一个共用全局组件
  • 5 search模块开发

1 复习

  1. 完成商品分类三级列表路由跳转一级路由传参(合并参数)
  2. 完成search模块中对于typeNav的使用(过渡动画)
  3. 对于typeNav请求次数也进行了优化(App.vue根组件)
  4. swiper插件:经常制作轮播图(移动端|PC端也可以使用)
    使用步骤:
    1)引入相应依赖包
    2)页面中的结构务必要有
    3)初始化swiper实例,给轮播图添加动态效果
  5. 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模块开发

  1. 先写静态页面 + 静态组件拆分
  2. 发请求(API)
  3. Vuex(三连环)
  4. 组件获取仓库数据,动态展示数据

相关文章:

笔记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年提出的一种启发式优化算法,它的灵感来自麋鹿群的繁殖过程。麋鹿有两个主要的繁殖季节:发情和产犊。在发情季节&#xff0…...

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 库&#xff0c;可以将 Java 对象转换为 JSON 格式&#xff0c;也可以将 JSON 字符串转换为 Java 对象&#xff0c;在中国和美国使用较为广泛。 0x02 漏洞成因 Fastjson < 1.2.68 版本在处理反序列化对象时…...

鸿蒙项目云捐助第二十一讲云捐助项目物联网IoT模拟器的使用

鸿蒙项目云捐助第二十一讲云捐助项目物联网IoT模拟器的使用 在前面的内容中&#xff0c;已经实现了云捐助物联网IoT的产品及设备设置&#xff0c;并且使用华为云Iot设备的在线调试工具进行命令下发的调试&#xff0c;这里也可以通过华为Iot物联网提供的MQTT模拟器进行连接。 …...

大数据技术原理与应用期末复习-知识点(二)

HBASE Hbase与传统关系数据库的对比分析 1.数据类型&#xff1a; 关系型数据库采用关系模型 Hbase采用更简单的数据模型&#xff08;把数据存储为未经解释的字符串&#xff09; 2.数据操作&#xff1a; 关系数据库&#xff1a;增删改查等 Hbase&#xff1a;插入 查询 删…...

高效准确的PDF解析工具,赋能企业非结构化数据治理

目录 准确性高&#xff1a;还原复杂版面元素 使用便捷&#xff1a;灵活适配场景 贴心服务&#xff1a;快速响应机制 在数据为王的时代浪潮中&#xff0c;企业数据治理已成为组织优化运营、提高竞争力的关键。随着数字化进程的加速&#xff0c;企业所积累的数据量呈爆炸式增长…...

C/C++ 数据结构与算法【栈和队列】 栈+队列详细解析【日常学习,考研必备】带图+详细代码

一、介绍 栈和队列是限定插入和删除只能在表的“端点”进行的线性表&#xff0c;是线性表的子集&#xff0c;是插入和删除位置受限的线性表。 &#xff08;操作受限的线性表&#xff09; 二、栈 1&#xff09;概念&#xff1a; 栈(stack)是一个特殊的线性表&#xff0c;是限…...

读书笔记~管理修炼-缄默效应

缄默效应&#xff1a;学会正确批评下属 员工明明犯了错误&#xff0c;却不及时告知你&#xff0c;总是拖到最后一刻无法弥补时才不得不承认出了问题——你遇到过这样的问题吗&#xff1f; 这其实是缄默效应在发挥作用。 在职场中&#xff0c;即使再扁平化的环境&…...

视频会议系统会前预约模块必须包含哪些功能?

视频会议系统会前预约模块必须包含哪些功能&#xff1f; 视频会议系统的会前预约模块是企业高效管理会议资源、提升会议效率的重要工具。一个完善的会前预约模块必须包含一系列功能&#xff0c;以确保会议的顺利进行和资源的合理分配。以下是对视频会议系统会前预约模块必须包…...

RabbitMQ中的Topic模式

在现代分布式系统中&#xff0c;消息队列&#xff08;Message Queue&#xff09;是实现异步通信、解耦系统组件的重要工具。RabbitMQ 是一个广泛使用的开源消息代理&#xff0c;支持多种消息传递模式&#xff0c;其中 Topic 模式 是一种灵活且强大的模式&#xff0c;允许生产者…...

C++ 智能指针的生命周期陷阱

C智能指针的生命周期陷阱&#xff1a;隐藏的坑与破解之道 在现代C开发中&#xff0c;智能指针作为资源管理的利器&#xff0c;极大减轻了开发者手动管理内存的负担。看似简单的shared_ptr、unique_ptr和weak_ptr背后&#xff0c;却隐藏着微妙的生命周期陷阱。这些陷阱可能导致…...

Cursor Pro完整解锁方案:一站式解决AI编程助手使用限制的终极指南

Cursor Pro完整解锁方案&#xff1a;一站式解决AI编程助手使用限制的终极指南 【免费下载链接】cursor-free-vip [Support 0.45]&#xff08;Multi Language 多语言&#xff09;自动注册 Cursor Ai &#xff0c;自动重置机器ID &#xff0c; 免费升级使用Pro 功能: Youve reach…...

BP算法在SAR成像中的高效实现与优化策略

1. BP算法在SAR成像中的核心原理 BP&#xff08;Back Projection&#xff09;算法是合成孔径雷达&#xff08;SAR&#xff09;成像中最直观的时域处理方法。我第一次接触这个算法时&#xff0c;就被它那种"暴力美学"式的计算逻辑震撼到了——它不需要任何傅里叶变换的…...

Qwen3-TTS-12Hz-1.7B-Base应用场景:智能音箱多语种交互语音引擎升级

Qwen3-TTS-12Hz-1.7B-Base应用场景&#xff1a;智能音箱多语种交互语音引擎升级 重要提示&#xff1a;本文仅讨论技术实现方案&#xff0c;所有内容均基于公开技术文档和测试数据&#xff0c;不涉及任何政治敏感内容&#xff0c;完全符合内容安全规范。 1. 智能音箱语音交互的现…...

Evolutionary Architecture by Example:如何避免过度工程化陷阱

Evolutionary Architecture by Example&#xff1a;如何避免过度工程化陷阱 【免费下载链接】evolutionary-architecture-by-example Navigate the complex landscape of .NET software architecture with our step-by-step, story-like guide. Unpack the interplay between m…...

基因组变异致病性预测:从SIFT、PolyPhen到PrimateAI的算法演进

点击 “AladdinEdu&#xff0c;你的AI学习实践工作坊”&#xff0c;注册即送-H卡级别算力&#xff0c;沉浸式云原生集成开发环境&#xff0c;80G大显存多卡并行&#xff0c;按量弹性计费&#xff0c;教育用户更享超低价。 摘要&#xff1a;基因组变异致病性预测是精准医学的关键…...

单机变联机:Nucleus Co-Op如何让你的电脑实现4人同屏游戏

单机变联机&#xff1a;Nucleus Co-Op如何让你的电脑实现4人同屏游戏 【免费下载链接】nucleuscoop Starts multiple instances of a game for split-screen multiplayer gaming! 项目地址: https://gitcode.com/gh_mirrors/nu/nucleuscoop 你是否曾想过&#xff0c;用一…...

基于SpringBoot + Vue的养老院管理系统(角色:家属、护工、管理员)

文章目录前言一、详细操作演示视频二、具体实现截图三、技术栈1.前端-Vue.js2.后端-SpringBoot3.数据库-MySQL4.系统架构-B/S四、系统测试1.系统测试概述2.系统功能测试3.系统测试结论五、项目代码参考六、数据库代码参考七、项目论文示例结语前言 &#x1f49b;博主介绍&#…...

如何彻底解决ComfyUI ControlNet Aux预处理功能异常的5个专业策略

如何彻底解决ComfyUI ControlNet Aux预处理功能异常的5个专业策略 【免费下载链接】comfyui_controlnet_aux ComfyUIs ControlNet Auxiliary Preprocessors 项目地址: https://gitcode.com/gh_mirrors/co/comfyui_controlnet_aux ComfyUI ControlNet Aux作为ComfyUI的辅…...

实战演练:基于Copaw下载的博客代码,在快马平台上快速构建并部署可访问的全栈应用

今天想和大家分享一个实战经验&#xff1a;如何基于Copaw下载的代码&#xff0c;在InsCode(快马)平台上快速构建并部署一个全栈博客应用。整个过程非常流畅&#xff0c;特别适合想快速验证想法的开发者。 项目背景与需求分析 最近在Copaw上找到一个博客系统的代码骨架&#x…...