Vue3-黑马(七)

news2025/1/24 11:02:26

目录:

(1)vue3-基础-子组件1

(2)vue3-基础-子组件2

(3)vue3-进阶-antdv-入门 


(1)vue3-基础-子组件1

之前我们的例子里只使用了一个vue的组件,那么在这个组件里能不能内嵌另外一个组件呢?可以的就是子组件

E14作为父组件:

 

页面中可重用的子组件:

 在父组件里使用:

 

上面定义的子组件写死了,可以定义属性:

 

 

?:属性是可选的  public目录下的图片地址直接写/图片名称

 

 

(2)vue3-基础-子组件2

 我们做一个案例,卡片中的数据,不是写死在页面上了,而是来源与网站,这个网站可以生成数据,我们根据这些数据来帮助我们生成用户卡片

 

 

响应数据: 

 

 result:表示返回的用户数组

info:表示分页相关的信息 result:返回一条page当前页第一页

 

为了写代码有更好的提示,可以做一个响应类型,描述用户数据,创建另外一个文件

 

 

 

 

 

(3)vue3-进阶-antdv-入门 

接下来我们学习vue的一个组件库:ant-design-vue,帮助我们把页面做的更加漂亮一些,它涉及到了很多可以重用的组件:表单、表格、级联选择器等等

vue-router:路由

pinia:vue组件间的数据共享

 安装:

引入先导入样式:

 

子引入组件库,我们做一个全局注册,将来页面不用一个一个引入按钮啊等等组件,可以直接使用标签

 

 

 表格组件a-table:

 

 

 

两种方式说明rowKey:

 

 

 

 

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

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

相关文章

近40个开源的工业软件-工业4.0

不同的工业流程,需要不同的工业软件。面向研发设计环节的开源软件,今天就来介绍一下面向生产控制环节的开源软件,主要为可编程逻辑控制器(PLC)、分布式控制系统(DCS)、生产执行系统(MES&#xf…

人工智能(AI)的应用以及前景

当今世界正迎来人工智能技术的全面爆发,它在各个领域的应用已经展现出了巨大的潜力和优势。下面,我们来探讨一下人工智能在不同领域中的应用。 首先,人工智能在医疗领域中的应用已经逐渐成为了现实。医疗机构可以利用人工智能技术&#xff0…

Java学习(13)(异常的概念、异常的体系结构、异常的分类、异常的处理【防御式编程、异常的抛出、异常的捕获、异常的处理流程】、自定义异常类 )

接上次博客:Java学习(12)(String类、String的查找方法、字符串转化、 替换、拆分、截取、trim方法、字符串的不可变性、StringBuilder和StringBuffer)_di-Dora的博客-CSDN博客 目录 异常的概念 异常的体系结构 异常…

【Python基础知识点总结】

Python基础知识点总结 思维导图基础数据类型数据结构基础语法高级语法简单编程题工程项目类石头剪子布扑克发牌学生成绩管理系统 思维导图 基础数据类型 布尔(bool) True False字符(str) ‘hello Python’整型(int) -1,5,88浮点(float) -2.3,4.1 数据结构 字典 {“position”…

springboot+vue交流互动系统(源码+文档)

风定落花生,歌声逐流水,大家好我是风歌,混迹在java圈的辛苦码农。今天要和大家聊的是一款基于springboot的交流互动系统。项目源码以及部署相关请联系风歌,文末附上联系信息 。 💕💕作者:风歌&a…

Springmvc练习二

1、网站练习,先清楚原理,便于拓展 注意一点就是页面定位的问题,如果你springmvc文件没有配置加上后缀“.jsp”的设置记得在网站控制器源代码的基础上加上“.jsp” 2、简单尝试一下就知道,这里所谓的参数绑定无非就是在java代码的…

【ChatGPT】ChatGPT国内镜像网站集合

Yan-英杰的主页 悟已往之不谏 知来者之可追 C程序员,2024届电子信息研究生 目录 什么是ChatGPT镜像? 亲测: 一、二狗问答(AI对话) 二、AiDuTu 三、WOChat 四、ChatGPT(个人感觉最好用) 我们可以利用ChatGPT干什么? 一、三分…

Java EE 初阶---多线程(二)

目录 四、多线程案例之--单例模式 4.1 单例模式 4.2 怎么去设计一个单例? 饿汉模式 懒汉模式 4.3 两种模式的总结 四、多线程案例之--单例模式 4.1 单例模式 是校招中最常考的设计模式之一. 啥是设计模式? 设计模式好比象棋中的 " 棋谱 "…

MaterialDesignInXamlToolkit 初学项目实战(1)首页搭建

前言 最近在学WPF,由于人比较烂,有一个星期没怎么动代码了。感觉有点堕落。现在开始记录WPF项目,使用MaterialDesignInXamlToolkit。 环境搭建 如果没下载MaterialDesign 的源码 github源码运行 在Nuget里面引入MaterialDesign Materia…

【ChatGPT镜像网站+MindShow高效生成PPT,保姆级安装教程】

🚀 AI破局先行者 🚀 🌲 AI工具、AI绘图、AI专栏 🍀 🌲 如果你想学到最前沿、最火爆的技术,赶快加入吧✨ 🌲 作者简介:硕风和炜,CSDN-Java领域优质创作者🏆&am…

一、基础算法9:区间合并 模板题+算法模板(区间合并)

文章目录 算法模板离散化题目模板 模板题区间和原题链接题目题解思路 算法模板 离散化题目模板 // 将所有存在交集的区间合并 void merge(vector<PII> &segs) {vector<PII> res;sort(segs.begin(), segs.end());int st -2e9, ed -2e9;for (auto seg : segs…

SD-MTSP:遗传算法GA求解单仓库多旅行商问题(提供MATLAB代码,可以修改旅行商个数及起点)

一、单仓库多旅行商问题 多旅行商问题&#xff08;Multiple Traveling Salesman Problem, MTSP&#xff09;是著名的旅行商问题&#xff08;Traveling Salesman Problem, TSP&#xff09;的延伸&#xff0c;多旅行商问题定义为&#xff1a;给定一个&#x1d45b;座城市的城市集…

SpringSecurity和Shiro---权限设置

在 Web 开发中&#xff0c;安全一直是非常重要的一个方面。安全虽然属于应用的非功能性需求&#xff0c;但是应该在应用开发的初期就考虑进来。如果在应用开发的后期才考虑安全的问题&#xff0c;就可能陷入一个两难的境地&#xff1a;一方面&#xff0c;应用存在严重的安全漏洞…

15-JavaScript-内部JS、外部JS、数据类型、关键词

1、内部JS&#xff1a;是在HTML文件中直接嵌入JavaScript代码的一种方式。使用<script>标签来定义JavaScript代码块。通常情况下&#xff0c;我们会将JavaScript代码放在文档的<head>或<body>标签内。 <!DOCTYPE html> <html> <head><…

MySQL-----事务管理

文章目录 前言一、什么是事务二、为什么会出现事务三、事物的版本支持四、事物的提交方式五、事务常见的操作方式六、事务隔离级别如何理解隔离性1隔离级别查看与设置隔离性读未提交【Read Uncommitted】读提交【Read Committed】可重复读【Repeatable Read】串行化【serializa…

ChatGPT 联网和插件功能,下周起可直接使用,无需排队!

夕小瑶科技说 分享 来源 | 新智元 OpenAI和谷歌&#xff0c;已经打得急红了眼&#xff0c;ChatGPT Plus用户&#xff0c;下周就可以体验联网和插件功能&#xff0c;无需再排队。鲨疯了&#xff0c;真的鲨疯了&#xff01; ChatGPT&#xff0c;下周开始联网&#xff0c;并开放插…

DAY 57 MySQL数据库的事务

事务的概念 事务是一种机制、一个操作序列&#xff0c;包含了一组数据库操作命令&#xff0c;并且把所有的命令作为一个 整体一起向系统提交或撤销操作请求&#xff0c;即这一组数据库命令要么都执行&#xff0c;要么都不执行。事务是一个不可分割的工作逻辑单元&#xff0c;在…

Python突破JS加密限制,进行逆向解密

前言 嗨喽~大家好呀&#xff0c;这里是魔王呐 ❤ ~! 目录标题 前言开发环境:模块使用:逆向目标逆向过程参数 JS 加密关键代码Python 登录关键代码尾语 &#x1f49d; 开发环境: Python 3.8 Pycharm 模块使用: time >>> 时间模块&#xff0c;属于内置&#xff0c;无…

lol由于找不到vcruntine140_1.dll文件,vcruntime140_1.dll修复方法

家人们有没有遇到过打开游戏或者软件提示由于找不到vcruntime140_1.dll&#xff0c;无法继续执行此代码的情况&#xff0c;是不是不知道怎么修复呢&#xff1f;Vcruntime140_1.dll是一个Windows系统文件&#xff0c;它是Microsoft Visual C Redistributable for Visual Studio …

快速搭建测ceph

一、cephadm介绍 Cephadm是一个由Ceph社区维护的工具&#xff0c;它用于在Ceph集群中管理和部署Ceph服务。它是一个基于容器化的工具&#xff0c;使用了容器技术来部署Ceph集群的不同组件。 使用Cephadm&#xff0c;管理员可以通过简单的命令行界面在整个Ceph集群中进行自动化…