【Vue】小兔鲜首页 - 拆分模块组件 - 局部注册

文章目录

  • 一、分析
  • 二、局部注册

一、分析

小兔仙组件拆分示意图

68226549162

开发思路

  1. 分析页面,按模块拆分组件,搭架子 (局部或全局注册)

  2. 根据设计图,编写组件 html 结构 css 样式 (已准备好)

  3. 拆分封装通用小组件 (局部或全局注册),一般这些小组件都会注册成全局的

    将来 → 通过 js 动态渲染,实现功能


二、局部注册

首先复制七个

image-20240131151133311

然后复制组件名

image-20240131151231369

利用滚轮全部替换

image-20240131151303927

然后shift摁住,去到行末

image-20240131151738714

再利用滚轮,选择全部,粘贴

image-20240131151452342image-20240131151543301

导入的时候也同理,先改后面,这是因为前面不会动

image-20240131152424938

然后再改前面

image-20240131152358351

<!-- 在脚手架里如果使用v-for而不加key是会报错的! -->
<BaseGoodsItem v-for="item in 5" :key="item"></BaseGoodsItem>

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

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

相关文章

人形机器人的应用场景

随着技术的不断进步和人工智能的快速发展&#xff0c;人形机器人逐渐走入人们的视野&#xff0c;并在各个领域中展现出广泛的应用潜力。本文将探讨人形机器人的主要应用场景&#xff0c;包括服务行业助手、教育领域应用、医疗保健助手、工业制造伙伴、家庭服务助手、军事领域执…

Develop an application using LangChain

模型、提示和解析器 模型 from langchain.chat_models import ChatOpenAIchat ChatOpenAI(temperature0.0) ChatOpenAI的默认模型为gpt-3.5-turbo 提示模板 from langchain.prompts import ChatPromptTemplatetemplate_string """把由三个反引号分隔的文…

浅析Git子模块

Git 子模块&#xff08;Submodule&#xff09;是 Git 的一个功能&#xff0c;允许将一个 Git 仓库作为另一个 Git 仓库的子目录。这使得可以在一个项目中包含并管理一个或多个独立的项目&#xff08;仓库&#xff09;。子模块保持自己的独立版本控制&#xff0c;使得主项目和子…

网络通信Socket的简单案例

1.客户端代码 import java.io.*; import java.net.Socket;public class GreetingClient {public static void main(String[] args) throws IOException {//准备目的地参数String ip "localhost";int port6006;//建立工人Socket client new Socket(ip, port);//建…

arcgis如何给没有连通的路打交点

1、在打交点的时候需要先有图层&#xff0c;图层的构建流程如下所示 1、找到目录 2、先新建一个文件夹 3、在新建的文件夹下新建一个文件地理数据库 4、在文件地理数据库下&#xff0c;新建一个要素类数据集 5、在要素类数据集下进行数据导入&#xff0c;选择单个导入 6、在要…

Meta Llama 3 .transpose().contiguous().view

Meta Llama 3 .transpose().contiguous().view() flyfish 参考地址 https://pytorch.org/docs/stable/generated/torch.transpose.html transpose美[trnspoʊz] 英[trnspəʊz;trɑːns-;-nz-] v. 使换位 / 转移 / 转换 / 调换n. <数>转置&#xff08;矩&#xff09…

2 程序的灵魂—算法-2.2 简单算法举例-【例 2.1】

【例 2.1】求 12345。 最原始方法&#xff1a; 步骤 1&#xff1a;先求 12&#xff0c;得到结果 2。 步骤 2&#xff1a;将步骤 1 得到的乘积 2 乘以 3&#xff0c;得到结果 6。 步骤 3&#xff1a;将 6 再乘以 4&#xff0c;得 24。 步骤 4&#xff1a;将 24 再乘以 5&#xf…

据报道,FTC 和 DOJ 对微软、OpenAI 和 Nvidia 展开反垄断调查

据《纽约时报》报道&#xff0c;联邦贸易委员会 (FTC) 和司法部 (DOJ) 同意分担调查微软、OpenAI 和 Nvidia 潜在反垄断违规行为的职责。 美国司法部将牵头对英伟达进行调查&#xff0c;而联邦贸易委员会将调查 OpenAI 与其最大投资者微软之间的交易。 喜好儿网 今年 1 月&a…

胶南代理记账,为您提供专业、便捷的会计服务

欢迎来到胶南代理记账服务站&#xff0c;这里我们专注于为企业提供专业的会计服务&#xff0c;无论您是初创企业还是已经在业界有一定规模的企业&#xff0c;我们都将以最专业的态度和最高效的服务为您量身定制合适的记账方案。 我们的目标不仅是帮助您完成财务报告的制作&…

Flink mongo Kafka

Apache Flink 是一个流处理和批处理的开源平台&#xff0c;用于在分布式环境中处理无界和有界数据流。它提供了用于数据处理的数据流 API&#xff08;DataStream API&#xff09;和表 API&#xff08;Table API&#xff09;&#xff0c;并可以与各种外部数据源和存储系统进行交…

Diffusers代码学习: IP-Adapter

从操作的角度来看&#xff0c;IP-Adapter和图生图是很相似的&#xff0c;都是有一个原始的图片&#xff0c;加上提示词&#xff0c;生成目标图片。但它们的底层实现方式是完全不一样的&#xff0c;我们通过源码解读来看一下。以下是ip adapter的实现方式 # 以下代码为程序运行…

51单片机通过键盘输入数值,控制流水灯的方向和速度。

1、功能描述 通过键盘输入数值&#xff0c;控制流水灯的方向和速度。 2、实验原理 键盘输入原理&#xff1a; 键盘通常通过矩阵形式连接到单片机的I/O端口。当用户按下某个按键时&#xff0c;会改变键盘矩阵中对应行和列的电平&#xff0c;单片机通过检测这些变化来确定哪个按…

Python opencv读取深度图,网格化显示深度

效果图&#xff1a; 代码&#xff1a; import cv2 import osimg_path "./outdir/180m_norm_depth.png" depth_img cv2.imread(img_path, cv2.IMREAD_ANYDEPTH) filename os.path.basename(img_path) img_hig, img_wid depth_img.shape # (1080, 1920) print(de…

C# MemoryCache 缓存应用

摘要 缓存是一种非常常见的性能优化技术&#xff0c;在开发过程中经常会用到。.NET提供了内置的内存缓存类 MemoryCache&#xff0c;它可以很方便地存储数据并在后续的请求中快速读取&#xff0c;从而提高应用程序的响应速度。 正文 通过使用 Microsoft.Extensions.Caching.Me…

mqtt-emqx:设置遗嘱消息

【pom.xml】 <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-web</artifactId><version>2.3.12.RELEASE</version> </dependency> <dependency><groupId>org.eclipse…

OpenAI新成果揭秘语言模型神经活动:稀疏自编码器的前沿探索

每周跟踪AI热点新闻动向和震撼发展 想要探索生成式人工智能的前沿进展吗&#xff1f;订阅我们的简报&#xff0c;深入解析最新的技术突破、实际应用案例和未来的趋势。与全球数同行一同&#xff0c;从行业内部的深度分析和实用指南中受益。不要错过这个机会&#xff0c;成为AI领…

手机自动化测试:6.某团文字的提取

我们要进行的操作重点就是文字的提取&#xff0c;然后循环&#xff0c;提取不是吗&#xff1f; try:# 使用XPath定位带有index属性的FrameLayout元素frame_layout_elements WebDriverWait(driver, timeout, poll_frequency).until(EC.presence_of_all_elements_located((By.X…

搜索之道:信息素养与终身学习的新引擎

&#x1f4d1;前言 在这个信息如同潮水般涌来的时代&#xff0c;我们每天都在与海量的数据和信息打交道。无论是学习、工作还是生活&#xff0c;我们都渴望能够迅速、准确地找到我们所需的信息。然而&#xff0c;面对如此繁杂的信息海洋&#xff0c;如何高效、精准地搜索到我们…

【C语言训练题库】扫雷->简单小游戏!

&#x1f525;博客主页&#x1f525;&#xff1a;【 坊钰_CSDN博客 】 欢迎各位点赞&#x1f44d;评论✍收藏⭐ 目录 1. 题目 2. 解析 3. 代码 4. 小结 1. 题目 小sun上课的时候非常喜欢玩扫雷。他现小sun有一个初始的雷矩阵&#xff0c;他希望你帮他生成一个扫雷矩阵。 扫雷…

Matplotlib常见图汇总

Matplotlib是python的一个画图库&#xff0c;便于数据可视化。 安装命令 pip install matplotlib 常用命令&#xff1a; 绘制直线&#xff0c;连接两个点 import matplotlib.pyplot as plt plt.plot([0,5],[2,4]) plt.show() 运行结果如下&#xff1a; 多条线&#xff1a;…