SpringBoot3+Vue3 学习打卡 B站青哥视频学习笔记
【【免费学习】1天学会SpringBoot3+Vue3实战项目开发，手把手带你做完整的前后端分离项目，适合计算机毕业设计、实习项目、Java、Vue编程练手项目】https://www.bilibili.com/video/BV1Df2cYVEWo?注意:el-image 直接使用网络图片地址是可以渲染图片的，不能直接使用本地的图片路径，直接使用会出现无法渲染的情况。预览图片:preview-sr
学习视频:
【【免费学习】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是为唯一的
<el-select
v-model="date.value"
placeholder="请选择水果"
size="large"
style="width:240px"
> <el-option
v-for="item in data.options"
:key="item.id"
:label="item.name"
:value="item.name">
<el-select /><script setup>
import { reactive } from "vue";
const data = reactive({
value: '',
options: [
{ id: 1, name: '苹果' },
{ id: 2, name: '香蕉' },
{ id: 3, name: '桃子' }
]
});
</script>3.单选框
<!-- works when >=2.6.0, recommended not work when <2.6.0 -->
<template>
<el-radio-group v-model="radio1">
<el-radio value="男">男</el-radio>
<el-radio value="女">女</el-radio>
</el-radio-group>
</template>
单选按钮组 常用于页面内容切换
注意:要保证v-model 里面的值跟value的值对应上
<el-radio-group style="margin-left:100px" v-model="data.tag" size="large">
<el-radio-button label="我发布的内容" value="1"></el-radio-button>
<el-radio-button label="我点赞的内容" value="2"></el-radio-button>
<el-radio-button label="我收藏的内容" value="3"></el-radio-button>
</el-radio-group>import { reactive } from 'vue';
const data = reactive({
tag: '3' //默认选中第三个
});
4.多选按钮 el-checkbox
<div style="margin: 20px 0">
<el-checkbox-group v-model="data.checkList">
<el-checkbox v-for="item in data.options" :key="item.id" :value="item.name" :label="item.Label" />
</el-checkbox-group>
<span style="margin-left:20px">({{ data.checkList }})</span>
</div>options:[{id:1,label:'苹果'，name:'苹果1'}，
{id:1,label:'苹果'，name:'苹果2'}，
{id:1,label:'桃子'，name:'桃子'}，
{id:1,label:'香蕉'，name:'香蕉'}，]5.图片 el-image（图片渲染、放大、缩小）
注意:el-image 直接使用网络图片地址是可以渲染图片的，不能直接使用本地的图片路径，直接使用会出现无法渲染的情况
el-image 使用本地的图片路径，必须先导入
<el-image :src='img' style="width:100px; margin-left:100px" />import img from '图片在本地的路径'
预览图片 :preview-src-list 放在数组里面遍历，可以通过预览页面上下切换数组里面的其他图片
<el-image :src=“img”style="width:100px;margin-left:100px" :preview-src-list="[img,img1,img2]">6.el-carousel 走马灯 轮播图
基本轮播图的使用
<el-carousel height="400px" style="width: 550px">
<el-carousel-item v-for="item in data.imgs" :key="item">
<img style="width: 100%; height: 400px" :src="item" alt="">
</el-carousel-item>
</el-carousel>使用的图片记得导入
import lun1 from '@/assets/lun1.png'
import lun2 from '@/assets/lun2.png'
import lun3 from '@/assets/lun3.png'
const data = reactive({
imgs:[lun1,lun2,lun3]
})7.日期时间 el-date-picker
日期
使用format 指定输入框的格式。 使用value-format 绑定绑定值的格式。
在实际的使用过程中，建议同时设置format 和value-format
选择日期:
<el-date-picker
v-model="data.date"
type="date"
placeholder="请选择日期"
format="YYYY-MM-DD"
value-format="YYYY-MM-DD"
/>
{{ data.date }}选择时间
<el-date-picker
style=“margin-left:50px”
v-model="data.time"
type="datetime"
placeholder="请选择时间"
format="HH:mm:ss"
value-format=""HH:mm:ss"
/>选择日期时间 2024-10-11 16:04:33
<el-date-picker
style=“margin-left:50px”
v-model="data.date1"
type="datetime"
placeholder="请选择日期时间"
format="YYYY-MM-DD HH:mm:ss"
value-format="YYYY-MM-DD HH:mm:ss"
/>选择开始日期至结束日期
日期范围 data.daterange 是一个数组 数组里面有2个值，第一个是开始日期，第二个是结束日期
<el-date-picker
style="margin-left: 50px"
v-model="data.daterange"
type="daterange" //范围
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
format="YYYY-MM-DD"
value-format="YYYY-MM-DD"
/>
{{ data.daterange?.length ? data.daterange[0] : '' }} - {{ data.daterange?.length ? data.daterange[1] : '' }}8.数据表格 el-table 基本的使用
<el-table :data="data.tableData" style="width: 100%" stripe>
<el-table-column prop="date" label="日期" width="180"/>
<el-table-column prop="name" label="名称" width="180"/>
<el-table-column prop="address" label="地址"/>
</el-table>
tableData: [
{ date: '2024-10-11', name: '亲哥哥哥', address: '安徽合肥' },
{ date: '2024-10-12', name: '小鲁班', address: '上海浦东' },
{ date: '2024-10-13', name: '小妲己', address: '北京大兴' },
]
斑马纹 stripe(背景灰白灰白段交替)
边框属性 border
插槽 第四集1:48:27 <template #default="scope">可以拿到行对象的数据
<el-table :data="data.tableData" style="width: 100%" stripe border>
<el-table-column prop="date" label="日期" width="180"/>
<el-table-column prop="name" label="名称" width="180"/>
<el-table-column prop="address" label="地址"/>
<el-table-column label="操作">
<template #default="scope">
<el-button type="danger" circle @click="del(scope.row.id)">
<el-icon><delete/></el-icon>
</el-button>
</template>
</el-table-column>
</el-table>
const del = (id) => {
alert("删除ID=" + id + "的数据");
};
9.el-pagination 分页器 分页组件 分页
v-model:current-page: 当前的页码
v-model:page-size： 当前的每页的个数
total： 总共的数据个数
layout 是分页的各种组件的表现集合
<el-pagination
v-model:current-page="data.currentPage"
v-model:page-size="data.pagesize"
:page-sizes="[5,10,15,20]"
background
layout="total,sizes,prev,pager,next,jumper"
:total="47">
/>10.Dialog 弹窗
dialogVisible控制弹窗显示的变量
主要作用是：新增、编辑数据
<el-dialog v-model="data.dialogVisible" title="编辑行对象" width="500">
<div style="padding: 20px">
<div style="margin-bottom:10px">日期：{{ data.row.date }}</div>
<div style="margin-bottom:10px">名称：{{ data.row.name }}</div>
<div>地址：{{ data.row.address }}</div>
</div>
</el-dialog>const edit = (row) =>{
data.row = row
data.dialogVisible =true
}
const del = (id) => {
alert("删除ID=" + id + "的数据");
};
有“AI”的1024 = 2048，欢迎大家加入2048 AI社区
更多推荐
6
0- 0
已为社区贡献1条内容
所有评论(0)