[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"article-public-J2MV6UAG":3,"public-project-articles-J2MV6UAG":17},{"id":4,"uuid":5,"project_id":6,"title":7,"content":8,"type":9,"status":10,"public_enabled":10,"views":11,"sort":12,"created_at":13,"updated_at":14,"project_title":15,"project_slug":16},488,"J2MV6UAG",47,"04. Element-Plus组件使用速成","## 文本框 el-input\n\n基本使用\n\n```vue\n\u003Cel-input v-model=\"data.input\" style=\"width: 240px\" placeholder=\"请输入内容\">\n\nimport {reactive} from \"vue\";\n\nconst data = reactive({\n  input: '青哥哥棒棒哒',\n})\n```\n\ndisabled 和 readonly  可以只显示文本  无法输入\n\n```vue\n\u003Cel-input v-model=\"data.input\" style=\"width: 240px\" disabled \u002F>\n```\n\n```vue\n\u003Cel-input v-model=\"data.input\" style=\"width: 240px\" readonly \u002F>\n```\n\n前置图标 prefix-icon 和 后缀图标 suffix-icon，注意需要单独导入图标 \n\n（import {Calendar, Search} from \"@element-plus\u002Ficons-vue\"）\n\n```vue\n\u003Cel-input v-model=\"data.input\" style=\"width: 240px\" placeholder=\"请输入内容\" :prefix-icon=\"Search\"  \u002F> \n```\n\n```vue\n\u003Cel-input style=\"width: 200px\" :suffix-icon=\"Calendar\">\u003C\u002Fel-input>\n```\n\n 添加 type=\"textarea\" 变成多行文本\n\n```vue\n\u003Cel-input type=\"textarea\" v-model=\"data.descr\" style=\"width: 300px\" placeholder=\"请输入一段描述\">\u003C\u002Fel-input>\n```\n\n可清空内容的属性 clearable\n\n```vue\n\u003Cel-input clearable v-model=\"data.input\" style=\"width: 240px\" placeholder=\"请输入内容\" \u002F>\n```\n\n## 下拉框 el-select\n\n基本使用方法\n\n```vue\n\u003Cel-select\n    v-model=\"data.value\"\n    placeholder=\"请选择水果\"\n    style=\"width: 240px\"\n>\n  \u003Cel-option\n      v-for=\"item in data.options\"\n      :key=\"item.id\"\n      :label=\"item.name\"\n      :value=\"item.name\"\n  \u002F>\n\u003C\u002Fel-select>\n\nimport {reactive} from \"vue\";\n  \nconst data = reactive({\n  value: '',\n  options: [{id: 1, name: '苹果'}, {id: 2, name: '香蕉'}, {id: 3,name: '桃子'}, {id: 4, name: '苹果'},]\n})\n```\n\nv-for 里的 key 绑定的数据是唯一的， 比如 id 就是唯一的\n\n```vue\n options: [{id: 1, name: '苹果'}, {id: 2, name: '香蕉'}, {id: 3,name: '桃子'}, {id: 4, name: '苹果'},]\n```\n\n多选可设置 `\u003Cfont style=\"color:rgb(48, 49, 51);\">multiple\u003C\u002Ffont>`\u003Cfont style=\"color:rgb(48, 49, 51);\"> 属性\u003C\u002Ffont>\n\n```vue\n\n```\n\n\u003Cfont style=\"color:rgb(48, 49, 51);\">如果 Select 的绑定值为对象类型，请务必指定 \u003C\u002Ffont>`\u003Cfont style=\"color:rgb(48, 49, 51);\">value-key\u003C\u002Ffont>`\u003Cfont style=\"color:rgb(48, 49, 51);\"> 作为它的唯一性标识。\u003C\u002Ffont>\n\n\u003Cfont style=\"color:rgb(48, 49, 51);\">通过使用 \u003C\u002Ffont>`\u003Cfont style=\"color:rgb(48, 49, 51);\">value-key\u003C\u002Ffont>`\u003Cfont style=\"color:rgb(48, 49, 51);\"> 属性，可以正确处理带有重复label的数据。 这样虽然\u003C\u002Ffont>`\u003Cfont style=\"color:rgb(48, 49, 51);\">label\u003C\u002Ffont>`\u003Cfont style=\"color:rgb(48, 49, 51);\"> 是重复的，但任可通过 \u003C\u002Ffont>`\u003Cfont style=\"color:rgb(48, 49, 51);\">id\u003C\u002Ffont>`\u003Cfont style=\"color:rgb(48, 49, 51);\"> 来确认唯一性。\u003C\u002Ffont>\n\n```vue\n\u003Cel-select\n    clearable\n    multiple\n    value-key=\"id\"\n    v-model=\"data.value\"\n    placeholder=\"请选择水果\"\n    style=\"width: 240px\"\n>\n  \u003Cel-option\n      v-for=\"item in data.options\"\n      :key=\"item.id\"\n      :label=\"item.label\"\n      :value=\"item.name\"\n  \u002F>\n\u003C\u002Fel-select> {{ data.value }}\n\noptions: [{id: 1, label: '苹果', name: '苹果1'}, {id: 2,  label: '香蕉', name: '香蕉'},\n    {id: 3,  label: '桃子',name: '桃子'}, {id: 4, label: '苹果', name: '苹果2'},]  \n```\n\n## 单选按钮 el-radio\n\n基本使用\n\n```vue\n\u003Cel-radio-group v-model=\"data.sex\">\n  \u003Cel-radio value=\"男\">男\u003C\u002Fel-radio>\n  \u003Cel-radio value=\"女\">女\u003C\u002Fel-radio>\n\u003C\u002Fel-radio-group>\n```\n\n单选按钮组，常用于页面内容切换\n\n注意： **要保证 v-model 里面的值跟 value 的值对应上**\n\n```vue\n\u003Cel-radio-group style=\"margin-left: 100px\" v-model=\"data.tag\" size=\"large\">\n  \u003Cel-radio-button label=\"我发布的内容\" value=\"1\" \u002F>\n  \u003Cel-radio-button label=\"我点赞的内容\" value=\"2\" \u002F>\n  \u003Cel-radio-button label=\"我收藏的内容\" value=\"3\" \u002F>\n\u003C\u002Fel-radio-group>\n\nconst data = reactive({\n  tag: '3'\n})    \n```\n\n## 多选按钮 el-checkbox\n\n基本用法\n\n多选框 绑定的是 数组，数组里面存储的是 value 绑定的值\n\n![](https:\u002F\u002Fcdn.nlark.com\u002Fyuque\u002F0\u002F2024\u002Fpng\u002F751015\u002F1728631794280-6d79c95d-5c10-49e0-acbf-efec7cc2c9a9.png)\n\n```vue\n\u003Cel-checkbox-group v-model=\"data.checkList\">\n  \u003Cel-checkbox v-for=\"item in data.options\" :key=\"item.id\" :value=\"item.name\" :label=\"item.label\" \u002F>\n\u003C\u002Fel-checkbox-group>\n\noptions: [{id: 1, label: '苹果', name: '苹果1'}, {id: 2,  label: '香蕉', name: '香蕉'},\n    {id: 3,  label: '桃子',name: '桃子'}, {id: 4, label: '苹果', name: '苹果2'},],\ncheckList: []\n```\n\n## 图片 el-image\n\n图片渲染、旋转、放大、缩小\n\n细节：el-image 使用网络图片地址是可以渲染图片的，但是使用本地的图片路径却无法渲染\n\nel-image 如果想使用本地的图片路径，必须先导入  \n\n```vue\n\u003Cel-image :src=\"img\"  style=\"width: 100px; margin-left: 100px\" \u002F>\n\nimport img from '@\u002Fassets\u002Flogo.svg' \n```\n\n赞？三连？\n\n预览图片 \u003Cfont style=\"background-color:rgb(245, 247, 250);\"> :preview-src-list\u003C\u002Ffont>\n\n```vue\n\u003Cel-image :src=\"img\"  style=\"width: 100px; margin-left: 100px\"  :preview-src-list=\"[img, 'https:\u002F\u002Ffuss10.elemecdn.com\u002F1\u002F34\u002F19aa98b1fcb2781c4fba33d850549jpeg.jpeg', 'https:\u002F\u002Ffuss10.elemecdn.com\u002F0\u002F6f\u002Fe35ff375812e6b0020b6b4e8f9583jpeg.jpeg']\" \u002F>\n```\n\n## 轮播图 el-\u003Cfont style=\"background-color:rgb(245, 247, 250);\">carousel\u003C\u002Ffont>\n\n基本使用\n\n```vue\n\u003Cel-carousel height=\"400px\" style=\"width: 550px\">\n  \u003Cel-carousel-item v-for=\"item in data.imgs\" :key=\"item\">\n    \u003Cimg style=\"width: 100%; height: 400px\" :src=\"item\" alt=\"\">\n  \u003C\u002Fel-carousel-item>\n\u003C\u002Fel-carousel>\n\nimport lun1 from '@\u002Fassets\u002Flun1.png'\nimport lun2 from '@\u002Fassets\u002Flun2.png'\nimport lun3 from '@\u002Fassets\u002Flun3.png'\n\nconst data = reactive({\n  imgs: [lun1, lun2, lun3]\n})                \n```\n\n## 日期时间 el-date-picker\n\n日期  2024-10-11\n\n\u003Cfont style=\"color:rgb(48, 49, 51);\">使用\u003C\u002Ffont>`\u003Cfont style=\"color:rgb(48, 49, 51);\">format\u003C\u002Ffont>`\u003Cfont style=\"color:rgb(48, 49, 51);\">指定输入框的格式。 使用 \u003C\u002Ffont>`\u003Cfont style=\"color:rgb(48, 49, 51);\">value-format\u003C\u002Ffont>`\u003Cfont style=\"color:rgb(48, 49, 51);\"> 指定绑定值的格式。\u003C\u002Ffont>\n\n\u003Cfont style=\"color:rgb(48, 49, 51);\">在实际的使用过程中，我们会同时设置 format 和 value-format\u003C\u002Ffont>\n\n```vue\n\u003Cel-date-picker v-model=\"data.date\" type=\"date\" format=\"YYYY-MM-DD\" value-format=\"YYYY-MM-DD\" placeholder=\"请选择日期\" \u002F>\n```\n\n![](https:\u002F\u002Fcdn.nlark.com\u002Fyuque\u002F0\u002F2024\u002Fpng\u002F751015\u002F1728633307230-f4188680-c9cd-4af3-92d7-6a810da9815a.png)\n\n时间 16:04:43\n\n![](https:\u002F\u002Fcdn.nlark.com\u002Fyuque\u002F0\u002F2024\u002Fpng\u002F751015\u002F1728633967853-8db301a3-a90b-42af-adfc-85b642172c05.png)\n\n```vue\n\u003Cel-date-picker\n    style=\"margin-left: 50px\"\n    v-model=\"data.time\"\n    type=\"datetime\"\n    placeholder=\"请选择时间\"\n    format=\"HH:mm:ss\"\n    value-format=\"HH:mm:ss\"\n\u002F>\n```\n\n日期时间  2024-10-11 16:04:43\n\n```vue\n\u003Cel-date-picker\n    style=\"margin-left: 50px\"\n    v-model=\"data.date1\"\n    type=\"datetime\"\n    placeholder=\"请选择日期时间\"\n    format=\"YYYY-MM-DD HH:mm:ss\"\n    value-format=\"YYYY-MM-DD HH:mm:ss\"\n\u002F>\n```\n\n日期范围  data.daterange 是一个数组  **数组里面有 2 个值，第一个是开始日期   第二个是结束日期**\n\n```vue\n\u003Cel-date-picker\n    style=\"margin-left: 50px\"\n    v-model=\"data.daterange\"\n    type=\"daterange\"\n    range-separator=\"至\"\n    start-placeholder=\"开始日期\"\n    end-placeholder=\"结束日期\"\n    format=\"YYYY-MM-DD\"\n    value-format=\"YYYY-MM-DD\"\n\u002F>\n```\n\n## 数据表格 el-table\n\n基本的使用\n\n```vue\n\u003Cel-table :data=\"data.tableData\" style=\"width: 100%\" stripe>\n  \u003Cel-table-column prop=\"date\" label=\"日期\" width=\"180\" \u002F>\n  \u003Cel-table-column prop=\"name\" label=\"名称\" width=\"180\" \u002F>\n  \u003Cel-table-column prop=\"address\" label=\"地址\" \u002F>\n\u003C\u002Fel-table>\n\ntableData: [\n  {  date: '2024-10-11', name: '亲哥哥哥', address: '安徽合肥' },\n  {  date: '2024-10-12', name: '小鲁班', address: '上海浦东' },\n  {  date: '2024-10-13', name: '小妲己', address: '北京大兴' },\n]\n```\n\nstripe： 斑马纹属性\n\nborder：边框属性\n\n\u003Ctemplate #default=\"scope\"> 拿到行对象的数据\n\n\n```vue\n\u003Cel-table :data=\"data.tableData\" style=\"width: 100%\" stripe border>\n  \u003Cel-table-column prop=\"date\" label=\"日期\" width=\"180\" \u002F>\n  \u003Cel-table-column prop=\"name\" label=\"名称\" width=\"180\" \u002F>\n  \u003Cel-table-column prop=\"address\" label=\"地址\" \u002F>\n  \u003Cel-table-column label=\"操作\">\n    \u003Ctemplate #default=\"scope\">\n      \u003Cel-button type=\"danger\" circle @click=\"del(scope.row.id)\">\n        \u003Cel-icon>\u003CDelete \u002F>\u003C\u002Fel-icon>\n      \u003C\u002Fel-button>\n    \u003C\u002Ftemplate>\n  \u003C\u002Fel-table-column>\n\u003C\u002Fel-table>\n\nconst del = (id) => {\n  alert(\"删除ID=\" + id + \" 的数据\")\n}      \n```\n\n## 分页组件 el-pagination\n\nv-model:current-page: 当前的页码\n\nv-model:page-size： 当前的每页的个数\n\ntotal： 总共的数据个数\n\nlayout 是分页的各种组件的表现集合\n\n```vue\n\u003Cel-pagination\n  v-model:current-page=\"data.currentPage\"\n  v-model:page-size=\"data.pageSize\"\n  :page-sizes=\"[5, 10, 15, 20]\"\n  background\n  layout=\"total, sizes, prev, pager, next, jumper\"\n  :total=\"47\"\n  \u002F>\n```\n\n## Dialog 弹窗\n\ndialogVisible 控制弹窗显示的变量\n\n主要作用是：新增、编辑数据\n\n```vue\n\u003Cel-dialog v-model=\"data.dialogVisible\" title=\"编辑行对象\" width=\"500\">\n  \u003Cdiv style=\"padding: 20px\">\n    \u003Cdiv style=\"margin-bottom: 10px\">日期：{{ data.row.date }}\u003C\u002Fdiv>\n    \u003Cdiv style=\"margin-bottom: 10px\">名称：{{ data.row.name }}\u003C\u002Fdiv>\n    \u003Cdiv>地址：{{ data.row.address }}\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fel-dialog>\n```\n\n\n\n","coding",1,8093,938,"2024-10-11 16:49:40","2026-05-03 22:49:02","1天学会SpringBoot3+Vue3实战项目开发","learn-springboot-vue",{"project":18,"items":19},{"id":6,"title":15,"slug":16},[20,27,34,42,43,50,57,64,71,78,85,92,99,106,113,120],{"id":21,"uuid":22,"project_id":6,"title":23,"type":9,"status":10,"public_enabled":10,"views":24,"sort":25,"created_at":26,"updated_at":14,"project_title":15,"project_slug":16},475,"OgrBbww7","01. 1天学会SpringBoot3+Vue3实战项目课程介绍",17862,910,"2024-10-11 16:50:50",{"id":28,"uuid":29,"project_id":6,"title":30,"type":9,"status":10,"public_enabled":10,"views":31,"sort":32,"created_at":33,"updated_at":14,"project_title":15,"project_slug":16},476,"U58ISSFR","02. 从0带你搭建Vue3工程",12899,911,"2024-10-11 16:47:49",{"id":35,"uuid":36,"project_id":6,"title":37,"type":9,"status":10,"public_enabled":10,"views":38,"sort":39,"created_at":40,"updated_at":41,"project_title":15,"project_slug":16},478,"tK3YUYq8","03. Vue3集成Element-Plus",9899,919,"2024-10-14 22:18:17","2026-05-07 15:33:28.189425+00",{"id":4,"uuid":5,"project_id":6,"title":7,"type":9,"status":10,"public_enabled":10,"views":11,"sort":12,"created_at":13,"updated_at":14,"project_title":15,"project_slug":16},{"id":44,"uuid":45,"project_id":6,"title":46,"type":9,"status":10,"public_enabled":10,"views":47,"sort":48,"created_at":49,"updated_at":14,"project_title":15,"project_slug":16},489,"zGi4XJsb","05. Vue3集成Vue-Router实现路由跳转",7443,939,"2024-10-12 15:44:41",{"id":51,"uuid":52,"project_id":6,"title":53,"type":9,"status":10,"public_enabled":10,"views":54,"sort":55,"created_at":56,"updated_at":14,"project_title":15,"project_slug":16},499,"cwsTdvo9","06. Vue3搭建后台管理系统",7421,964,"2024-10-14 16:02:49",{"id":58,"uuid":59,"project_id":6,"title":60,"type":9,"status":10,"public_enabled":10,"views":61,"sort":62,"created_at":63,"updated_at":14,"project_title":15,"project_slug":16},501,"JlXltpKA","07. Mysql语法简介（速成）",5208,973,"2024-10-15 16:52:18",{"id":65,"uuid":66,"project_id":6,"title":67,"type":9,"status":10,"public_enabled":10,"views":68,"sort":69,"created_at":70,"updated_at":14,"project_title":15,"project_slug":16},509,"c3XrOTcU","08. 从0带你搭建SpringBoot3工程",9397,992,"2024-10-16 15:43:13",{"id":72,"uuid":73,"project_id":6,"title":74,"type":9,"status":10,"public_enabled":10,"views":75,"sort":76,"created_at":77,"updated_at":14,"project_title":15,"project_slug":16},516,"QsKwbDX7","09. SpringBoot3集成Mybatis",10348,1004,"2024-10-17 16:36:15",{"id":79,"uuid":80,"project_id":6,"title":81,"type":9,"status":10,"public_enabled":10,"views":82,"sort":83,"created_at":84,"updated_at":14,"project_title":15,"project_slug":16},519,"qKG13ySo","10. SpringBoot3+Vue3实现基本的增删改查功能",9572,1013,"2024-10-18 16:34:55",{"id":86,"uuid":87,"project_id":6,"title":88,"type":9,"status":10,"public_enabled":10,"views":89,"sort":90,"created_at":91,"updated_at":14,"project_title":15,"project_slug":16},527,"7uED9n7e","11. Vue3开发登录注册页面",7106,1031,"2024-10-21 17:35:30",{"id":93,"uuid":94,"project_id":6,"title":95,"type":9,"status":10,"public_enabled":10,"views":96,"sort":97,"created_at":98,"updated_at":14,"project_title":15,"project_slug":16},535,"poUfWrWc","12. Vue3管理系统开发个人信息、修改密码页面",5777,1050,"2024-10-22 17:50:30",{"id":100,"uuid":101,"project_id":6,"title":102,"type":9,"status":10,"public_enabled":10,"views":103,"sort":104,"created_at":105,"updated_at":14,"project_title":15,"project_slug":16},542,"FxHR3hNR","13. SpringBoot3+Vue3实现文件上传下载功能",4489,1057,"2024-10-23 17:31:02",{"id":107,"uuid":108,"project_id":6,"title":109,"type":9,"status":10,"public_enabled":10,"views":110,"sort":111,"created_at":112,"updated_at":14,"project_title":15,"project_slug":16},548,"VPZNSTxr","14. SpringBoot3+Vue3实现富文本编辑器功能",3931,1072,"2024-10-24 17:38:21",{"id":114,"uuid":115,"project_id":6,"title":116,"type":9,"status":10,"public_enabled":10,"views":117,"sort":118,"created_at":119,"updated_at":14,"project_title":15,"project_slug":16},555,"nal0yVxM","15. SpringBoot3+Vue3实现数据批量导入导出功能",3577,1090,"2024-10-28 17:39:21",{"id":121,"uuid":122,"project_id":6,"title":123,"type":9,"status":10,"public_enabled":10,"views":124,"sort":125,"created_at":126,"updated_at":14,"project_title":15,"project_slug":16},564,"XxSPPFGi","16. SpringBoot3+Vue3实现数据统计图表功能",4236,1109,"2025-01-09 09:40:57"]