学习视频:
【【免费学习】1天学会SpringBoot3+Vue3实战项目开发，手把手带你做完整的前后端分离项目，适合计算机毕业设计、实习项目、Java、Vue编程练手项目】https://www.bilibili.com/video/BV1Df2cYVEWo?p=2&vd_source=7eb65dacd72aa848b373e76c5f6c572a
第二节课从零 徒手捏vue3工程
注意:vue3使用到scrip要加上 setup 语法糖 ==> <script setup>
第三节课 引入Element-Plus组件库 +icon组件库 组件的使用
网址:
https://element.eleme.cn/#/zh-CN/component/quickstart
注意:按钮里面引用icon要单独导包
import ?idea软件可以alt+enter实现快捷导包
第四节课 element组件库 组件的使用?
1.input?
input前面加icon ? :prefix-icon="图标名称"
input后面加icon ? :suffix-icon="图标名称"
使用到的图标需要input单独导入
import { Calendar, Search } from "@element-plus/icons-vue";
import { 图标名称, 图标名称 } from "@element-plus/icons-vue";
tips:input 添加 type="textarea" ? 属性 可以变成多行文本 显示不下的内容可以通过 拖动 下拉条显示
2.下拉框el-select select选择器（下拉框）
select 选择器绑定数据传给后端 options:[苹果,香蕉,桃子]
v-fot绑定的key是为唯一的?
3.单选框 ?
? ? <!-- works when >=2.6.0, recommended not work when <2.6.0 -->
单选按钮组 常用于页面内容切换
注意:要保证v-model 里面的值跟value的值对应上
4.多选按钮 el-checkbox
5.图片 el-image（图片渲染、放大、缩小）
注意:el-image 直接使用网络图片地址是可以渲染图片的，不能直接使用本地的图片路径，直接使用会出现无法渲染的情况
el-image 使用本地的图片路径，必须先导入
import img from '图片在本地的路径'
预览图片 ? ? ?:preview-src-list 放在数组里面遍历，可以通过预览页面上下切换数组里面的其他图片
6.el-carousel 走马灯 轮播图
基本轮播图的使用
使用的图片记得导入
7.日期时间 el-date-picker
日期
使用format 指定输入框的格式。 使用value-format 绑定绑定值的格式。
在实际的使用过程中，建议同时设置format 和value-format
选择日期:
选择时间
选择日期时间 2024-10-11 16:04:33
选择开始日期至结束日期
日期范围 data.daterange ? 是一个数组 数组里面有2个值，第一个是开始日期，第二个是结束日期
8.数据表格 el-table?基本的使用
?斑马纹 stripe(背景灰白灰白段交替)
边框属性 border
插槽 第四集1:48:27 <template #default="scope">可以拿到行对象的数据
9.el-pagination 分页器 分页组件 分页
v-model:current-page: ? ? ?? ?当前的页码
v-model:page-size： ? ? ? ??? ?当前的每页的个数
total：?? ??? ??? ??? ??? ?总共的数据个数
layout?? ??? ??? ??? ??? ?是分页的各种组件的表现集合
10.Dialog 弹窗
dialogVisible控制弹窗显示的变量
主要作用是：新增、编辑数据
?
