Vue El 基础
VUE 和 VUE-Cli
概念
- VUE 是一种流行的渐进式JavaScript框架，用于构建Web用户界面
- 它具有易学、轻量级、灵活性强、高效率等特点，并且可以与其他库和项目集成
- 是目前最流行的前端框架之一
- VUE-Cli 称为“VUE脚手架”,它是由VUE官方提供的客户端，专门为单页面应用快速搭建的脚手架
- 使用它可以轻松的创建新的应用程序，而且可以自动生成vue和webpack工程模板
安装手册
VUE安装操作手册（详细操作步骤点这里）
前端工程分类
- 前端工程分为单页面架构和多页面架构
- 多页面架构（传统方案）：
指工程中存在多个*.html 文件，每一个页面对应一个 html 文件 - 单页面架构（VUE 脚手架工程）：
指工程中只有一个 html 页面文件，通过一个 html 页面中的内容改变实现多页面的效果
每个页面至少对应一个*.vue 文件
- 多页面架构（传统方案）：
- 用户的URL只对应一个页面，我们可以随时替换这个页面的内容，方便更新
- 每个页面可以由多个部分组成，每个部分都可以按需替换
- 局部替换的做法，也反向实现了页面某些部分的"复用"
- 注意：
- html 文件是页面全部内容，vue 文件可能是页面的一个部分，也能是页面的所有内容
- 两种方式对用户体验没有影响，不论哪种方式在用户端是一样的
vue组件的加载顺序
- 浏览器加载的是项目中唯一的一个index.html,会将所有的vue组件挂载至此div中
- vue首个加载的组件就是App.vue，会先加载App.vue中的固定内容，再加载它的可变区域
- 如果没有设置router-view可变区域,那么所有页面只有固定的显示内容
- 至于具体展示哪个组件，取决于路径与vue组件的对应关系，这个对应关系在router/index.js中配置
IDEA工具VUE工程初始化
- 确保IDEA中有vue插件
- 通过 IDEA 的 Terminal 工具，在工程的根目录下，执行 vue create 工程名 来创建工程
- 通过 cd 工程名 指令 进入到创建的 vue 工程目录下
- 启动工程： npm run serve
- 停止工程：Ctrl+C 输入 Y 回车
- 修改端口号：在 package.json 文件的第 6 行修改：
"serve": "vue-cli-service serve --port 9090",
VUE项目工程结构解析
项目中的主要内容：
- public 文件夹：
- 里面存放静态资源文件，如：图片/视频等
- 此文件夹中存放着唯一的一个index.html文件,我们的vue组件会挂载(mount)到此页面渲染出来
- src/router/index.js：路由配置文件，在里面配置请求地址和 VUE 组件的映射关系
- src/views：在里面创建对应每个页面的*.vue 文件
- App.vue：此组件工程启动后自动挂载到 index.html 页面的组件，可以理解为工程的入口
- main.js：当需要引入其他框架或进行全局配置时使用此文件
- package.json：修改端口号
- 如果项目中没有node_moudules 可以执行 npm install 来自动下载
view.vue 的创建方式
-
在 v1/src/App.vue中添加新view文件的router-link链接
-
在v1/src/views文件夹下创建一个新的VueComponent(也就是.vue文件)
-
编写新创建好的.vue文件
- template标签中放的是HTML
- style标签中放的是CSS
- script标签中放的是JS
注意:vue3的script开始标签中必须要有setup，否则代码不生效！\
-
还需要在v1/src/router/index.js文件中配置路由跳转的路径
- path就是App.vue中router-link标签中to属性的值
- 箭头函数加载的就是对应的.vue文件的路径
-
写完可以启动项目访问：http://localhost:9090/ 进行测试，如果看到了下图所示的内容，则表明配置成功了
MVC 与 MVVM
MVC 设计模式就是将实现前端业务的所有代码划分为三部分
- M：Model 模型 ， 对应后端提供业务数据的相关代码(Java/JS/Python…)
- V：View 视图， 对应的是页面展示相关代码
- C：Controller 控制器， 对应的是将数据显示到页面中的过程代码
MVC 设计模式的弊端：Controller 需要频繁的进行 DOM 相关操作（遍历查找元素），比较浪费资源
MVVM 设计模式就很好的解决了这个问题：
MVVM 设计模式也是将实现前端业务的所有代码划分为三部分 - M：Model 模型 ， 对应数据相关代码(数据)
- V：View 视图， 对应的是页面标签相关(页面)
- VM：ViewModel 视图模型，直接将页面元素与变量进行绑定
- 将页面中的元素与某个变量在内存中进行绑定
- 对变量进行监听，当变量发生改变时，会从内存中找到与此变量绑定的元素并更新
这样就不用像 MVC 设计模式中通过遍历查找的方式查找元素了，大大提高了执行的效率
VUE 指令
文本相关指令
- const info = ref(“文本相关的内容”); 定义响应式变量,注意需要导入！
- {{变量}} 插值，让此处的文本内容与变量进行绑定
- v-text=“响应式变量名”：将文本内容与变量进行绑定
- v-html=“响应式变量名”：将标签内容与变量进行绑定
- 关于写法：
- 响应式变量的导入语句: import {ref} from “vue”
- 在JS代码中使用响应式变量: console.log(info.value)
- 箭头函数: const f = (参数列表)=>{方法体}
<template><p>{{info}}</p><p v-text="info2"></p><!-- v-text渲染文本内容--><p v-html="info2"></p><!-- v-html若有html元素，会按照元素效果进行渲染--><button @click="f">按钮</button>
</template>
<script setup>
import {ref} from "vue";
//1.定义响应式变量
const info = ref('今<b>天</b>中午<mark>吃什么</mark>?');
//定义箭头函数
const f = ()=>{//2.在JS中使用响应式变量,必须加.value!console.log(info.value);
}
</script>
属性绑定
- v-bind:属性名=“变量名”
- 让HTML元素的 xxx 属性的值与变量值进行绑定
- 可以简写成 ：:属性名=“变量名”
<template><!-- 将input元素的value属性与响应式变量info进行绑定，由info来控制输入框显示的默认值 --><input type="text" v-bind:value="info"><!-- v-bind:value="" 可以简写成 :value="" --><input type="text" :value="info"><hr><a href="url">超链接1</a> <!--此处的url只是一个字符串--><a :href="url">超链接2</a> <!--属性绑定,将超链接的跳转路径交给url变量来控制-->
</template>
<script setup>
import {ref} from "vue";
const info = ref('属性绑定');
const url = ref('https://www.baidu.com');
url.value = 'https://www.jd.com'; //JS中操作响应式变量的值，必须.value!!!
</script>
事件绑定
- @click=“f()” 与 v-on:click=“f” 都是绑定点击事件
- @keydown.enter=“ent” 表示绑定敲回车事件
<template><!-- 下面这两种写法是等价的，我们一般使用第2种 --><button @click="f">按钮1</button><button v-on:click="f">按钮2</button><h3>敲回车事件</h3><!-- v-model="search"双向绑定可以将页面输入的值存入search变量中@keydown.enter="f"敲回车调用f函数 --><input type="text" placeholder="请输入您想要搜索的商品!" v-model="search" @keydown.enter="f">
</template>
<script setup>
import {ref} from "vue";
//定义变量用来保存用户输入的搜索关键词
const search = ref('');
const f = ()=>{console.log('我是f函数');alert('您想要搜索的是'+search.value+'吗?');
}
</script>
循环指令
- v-for=“元素 in 数字n” 遍历数组 从1到数字n，步长为1，数字n可以自定义
- v-for=“元素 in 数组” 遍历数组 遍历时会生成当前遍历到的元素
- v-for=“(元素,下标) in 数组” 第2个参数是当前遍历到的元素下标，从0开始
- 这个指令是放在需要重复多次生成的元素上的
<template><ul><!-- 循环遍历arr数组,uname就是本轮循环遍历到的元素 --><li v-for="uname in arr">{{uname}}</li></ul><ol><!-- 从1开始遍历,一直到数字5,固定每次++,结束数字5可以自定义 --><li v-for="item in 5">{{item}}</li></ol><table border="1px"><caption>商品列表</caption><tr><th>序号</th><th>商品名称</th><th>商品价格</th><th>商品库存</th><th>操作</th></tr><tr v-for="(item,index) in productArr"><td>{{index+1}}</td><td>{{item.title}}</td><td>{{item.price}}</td><td>{{item.num}}</td><td><button @click="del(index)">删除</button></td></tr></table>
</template>
<script setup>
import {ref} from "vue";
const arr = ref(["张三","李四","王五","赵六","钱七"]);
const productArr = ref([{title:'手机',price:5000,num:800},{title:'平板',price:6000,num:900},{title:'电脑',price:7000,num:100},{title:'电视机',price:8000,num:200},
]);const del = (index)=>{if(confirm('您确认要删除此条数据吗?')){//删除数组中的元素,从当前index开始,删1个元素productArr.value.splice(index,1);}
}
</script>
双向绑定
- 双向绑定：包含两个方向的绑定:
- 可以将Model中的变量值与页面元素进行绑定
如:将JS中user.username的值"张三"绑定显示在input上 - 还可以监听View中的页面元素,如果页面元素改变,就会立即拿到页面元素的值并存入Model对应的变量中
如：用户输入了用户名就会立即保存在user对象的username属性中
- 可以将Model中的变量值与页面元素进行绑定
- v-model=“变量名” 除了这个指令以外，其他都是单向绑定
- 双向绑定指令一般是在需要获取用户输入内容时使用（输入框/单选/多选/下拉选框等）
- 之前 DOM 操作需要先获取 html 元素，再获取 html 元素的值，效率较低
- 现在使用 MVVM 的方式会大大简化之前的DOM写法,我们只需要定义存值的响应式变量并进行绑定即可
<template><!-- 双向绑定:将info变量的值与页面上的元素进行绑定，效果:1)info变量的数据发生变化,页面html的显示会随之变化(Data Binding数据绑定)2)页面上元素的值发生变化,info变量的值也会随之改变(DOM Listener事件监听)--><input type="text" v-model="info"><button @click="console.log(info)">点击</button><h3>用户登录</h3><input type="text" placeholder="请输入用户名" v-model="user.name"><input type="password" placeholder="请输入密码" v-model="user.password"><br>性别:<input type="radio" name="gender" value="1" v-model="user.gender">男<input type="radio" name="gender" value="0" v-model="user.gender">女<button @click="login">登录</button>
</template>
<script setup>
import {ref} from "vue";
const info = ref('双向绑定');
//定义一个用户对象用来保存用户输入的数据
const user = ref({name:'皮卡丘',password:'123',gender:'1'});
const login = ()=>{console.log(user.value);//打印完整的对象console.log(user.value.name);//打印对象的属性值console.log(user.value.password);console.log(user.value.gender);
}
</script>
隐藏显示指令
- v-if=“变量”：控制元素是否显示
- true 显示，false 不显示
- 直接在DOM中跳过该元素渲染，HTML代码中没有该元素
- v-else： 和最近的未关闭的 v-if 状态取反
- v-show=“变量”：控制元素是否显示
- true 显示，false 不显示（隐藏元素）
- 通过设置CSS display:none 让元素消失
<template><!-- v-if="布尔值" true元素显示 false元素消失false表示该元素不会被渲染到DOM中,会直接跳过这部分内容的渲染 --><p v-if="true">张三</p><p v-if="false">李四</p><p>王五</p><hr><p v-if="isShow">月亮</p><p v-if="isShow">星星</p><!-- v-else是v-if取反 它会找离自己最近的v-if进行取反 --><p v-else>太阳</p><hr><!-- v-if是直接在DOM中跳过该元素渲染,HTML代码中没有该元素 --><p v-if="false">小绿</p><!-- v-show是修改元素的CSS属性display:none;在频繁切换是否显示时才推荐,性能更好 --><p v-show="false">小红</p>
</template>
<script setup>
import {ref} from "vue";
const isShow = ref(false);
</script>
VUE指令总结
- {{变量}}：插值，让此处的文本内容和变量进行绑定
- v-text=“变量”：让元素的文本内容和变量进行绑定
- v-html=“变量”：让元素的 html 标签内容和变量进行绑定
- v-bind:属性名=“变量”：让 xxx 属性的值和变量进行绑定，简写是把 v-bind 去掉
- v-model=“变量”：让控件的值和变量进行双向绑定
应用场景：当需要获取用户输入内容时使用
（当变量的值改变时，控件的值会随之改变；当控件中用户输入的值改变时，变量的值也会随之改变） - v-on:事件名=“方法”：事件绑定，简写@事件名
- v-for=“(变量,下标) in 数组”：循环指令，加在需要重复多次生成的元素上，循环几次，生成几个当前元素(包含其子元素)
- v-if=“变量”：控制元素是否显示，true 显示，false 不显示（直接不渲染该元素）
- v-else 和 v-if 的状态取反
- v-show=“变量”：控制元素是否显示，true 显示，false 不显示（隐藏元素）
Element Plus 入门
介绍：基于 Vue3，面向设计师和开发者的组件库
链接：官网网址
Element Plus 安装步骤
- 打开 El 官网 https://element-plus.org/zh-CN/
- 点击上方的"指南"–>“安装”–>“使用包管理器”
- 打开 IDEA 终端 注意：如果有未关闭的 VUE 项目，要先终止项目
- 复制"使用包管理器"中的第 1 句命令，回车执行安装，安装成功后重启项目
- 找到"快速开始"–>并复制图示的两句代码
- 找到 VUE 项目中的 src/main.js 文件，粘贴刚刚复制的这两行代码，如图所示：
import { createApp } from 'vue' import App from './App.vue' import router from './router' import store from './store' import ElementPlus from 'element-plus' import 'element-plus/dist/index.css'createApp(App).use(ElementPlus).use(store).use(router).mount('#app')
使用技巧
- 可以使用导航栏中的搜索功能
- 还可以查看对应组件的源代码，并且能够复制
Element-Plus组件
Button 按钮组件
https://element-plus.org/zh-CN/component/button.html
- type 切换按钮主题色
- primary蓝 success绿 info灰 warning黄 danger红
- plain 镂空按钮
- round 胶囊型按钮
- circle 圆形按钮
- disabled 禁用按钮
- link 链接按钮
<template><!-- 如果按钮上有样式效果,说明El组件库引入成功了 --><!-- 如果<el-button有提示,说明IDEA的element插件安装成功了 --><!-- 参照笔记完成以上两步,注意:需要重启IDEA! --><el-button>按钮</el-button><!-- type切换按钮主题色 primary蓝 danger红 info灰 success绿 warning黄--><!-- plain镂空按钮 round圆角按钮 circle圆形按钮 disabled禁用按钮 --><el-button type="primary">蓝按钮</el-button><el-button type="danger" plain>红按钮</el-button><el-button type="info" round>灰按钮</el-button><el-button type="success" circle>绿按钮</el-button><el-button type="warning" disabled>黄按钮</el-button><hr><!-- 链接按钮 --><a href="https://www.baidu.com"><el-button link>链接按钮</el-button></a>
</template>
Icon 图标组件
- 在如下网址：找到并复制图中的代码
https://element-plus.org/zh-CN/component/icon.html#注册所有图标
- 在 main.js 中粘贴刚刚复制的代码（引入 EL 图标相关内容 ）（这是一次性的代码，无需多次配置）
import { createApp } from 'vue' import App from './App.vue' import router from './router' import store from './store' //1.引入element-plus组件库与其样式 import ElementPlus from 'element-plus' import 'element-plus/dist/index.css' //2.引入element-plus图标库,并起别名为ElementPlusIconsVue import * as ElementPlusIconsVue from '@element-plus/icons-vue' const app = createApp(App)/* 创建vue实例,并起名为app */ //3.将所有导入的图标组件变为键值对数组,并依次遍历取出每一个图标组件[key, component] for (const [key, component] of Object.entries(ElementPlusIconsVue)) {// 4.将当前遍历到的图标组件注册为当前vue实例的全局组件app.component(key, component) } //5.为前vue实例应用element-plus组件库 app.use(ElementPlus).use(store).use(router).mount('#app') - 直接左键单击图标，就可以自动复制该图标的代码
- 测试图标的代码
<template><el-icon><Message /></el-icon><!-- 注意:图标库需要在main.js中引入并注册! --><!-- size修改图标尺寸 color修改图标颜色 --><!-- 注意:这里的图标并不是传统的.png或.jpg等图片,是SVG矢量图SVG可缩放矢量图形,可以直接嵌入在html中,任何分辨率下都可以清晰显示--><el-icon size="50px" color="red"><Delete /></el-icon>
</template>
Message 消息提示组件
https://element-plus.org/zh-CN/component/message.html
- ElMessage需要导入!
- 定义函数用来弹出不同类型的消息提示
<template><h1>El组件-消息提示</h1><el-button @click="f(1)" type="success">成功消息</el-button><el-button @click="f(2)" type="danger">失败消息</el-button><el-button @click="f(3)" type="warning">警告消息</el-button><el-button @click="f(4)" type="info">普通消息</el-button><el-button @click="f(5)" type="primary">可关闭的消息</el-button>
</template><script setup>
//注意! ElMessage需要导入!
import {ElMessage} from "element-plus";
//定义函数用来弹出不同类型的消息提示
const f = (type)=>{switch (type){case 1 : ElMessage.success('成功消息!');break;case 2 : ElMessage.error('失败消息!');break;case 3 : ElMessage.warning('警告消息!');break;case 4 : ElMessage('普通消息!');break;case 5 : ElMessage({message: '可关闭的消息',showClose: true});}
}
</script>
<style scoped>
</style>
Radio 单选组件
https://element-plus.org/zh-CN/component/radio.html
- 所有单选项需要放到 el-radio-group 中，且需要在 group 上设置双向绑定用来提交值
- el-radio 圆形单选项
- el-radio-button 按钮形单选项
- value用来设置当前单选选项的值
- label用来设置当前单选选项显示的文本，也可以直接写在标签之间
<template><h1>El-单选组件</h1><el-radio-group v-model="edu"><!-- value保存当前选项的值 label保存当前选项显示的文本 --><el-radio value="初中" label="学历:初中"></el-radio><el-radio value="高中" label="学历:高中"></el-radio><el-radio value="本科" label="学历:本科"></el-radio><el-radio value="硕士">学历:硕士</el-radio></el-radio-group><h4>您选中的学历是:{{edu}}</h4><hr><el-radio-group v-model="pr">
<!-- <el-radio-button v-for="p in arr">{{p.title}}</el-radio-button>--><el-radio-button v-for="p in arr" :value="p.price" :label="p.title"></el-radio-button></el-radio-group><h4>您选中的价格是:{{pr}}</h4>
</template><script setup>
import {ref} from "vue";const edu = ref('本科');const pr = ref('2500');
//准备数组用来存放原始数据
const arr = ref([{title:'五粮液',price:500},{title:'茅台',price:2500},{title:'汾酒',price:330},{title:'梦之蓝',price:368}
]);
</script>
<style scoped>
</style>
Select 选择器组件
https://element-plus.org/zh-CN/component/select.html
- 所有下拉选项需要放到 el-select 中，且需要设置双向绑定用来提交值
- value 用来设置当前选项的值
- label 用来设置当前选项显示的文本，也可以直接写在标签之间
<template><h1>下拉选框组件</h1><el-select placeholder="请选择你喜欢的城市" style="width: 50%" v-model="city"><el-option label="三亚" value="sy"></el-option><el-option label="大理" value="dl"></el-option><el-option label="淄博" value="zb"></el-option><el-option label="北京" value="bj"></el-option><el-option label="大同" value="dt"></el-option></el-select><h4>你喜欢的城市是：{{city}}</h4>
</template><script setup>
import {ref} from "vue";//定义变量用来保存用户选择的城市
const city = ref('zb');
</script>
<style scoped>
</style>
Switch 开关组件
https://element-plus.org/zh-CN/component/switch.html
默认只支持boolean类型的值，所以如果想要支持扩展的 string 和 number 类型，必须通过设置：
- active-value=“1” inactive-value=“0” 不写:表示不做属性绑定，此处的1是string类型
- :active-value=“1” :inactive-value=“0” 写:表示属性绑定，此处的1是number类型
<template><h1>El-开关组件</h1><el-switch v-model="value1" /><el-switchv-model="value2"class="ml-2"style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"/><el-switch v-model="value3" active-value="1" inactive-value="0"/><el-switch v-model="value4" :active-value="1" :inactive-value="0"/><br><el-switch v-model="isShow"/><hr><img src="imgs/fcq.jpg" width="200" v-if="isShow">
</template><script setup>
import { ref } from 'vue'
const isShow = ref(true)
const value1 = ref(false)
const value2 = ref(false)
const value3 = ref('0')
const value4 = ref(0)
</script>
<style scoped>
</style>
Form 表单组件
https://element-plus.org/zh-CN/component/form.html
- 表单所有内容需要写在 el-form 中
- 每个表单项需要写在 el-form-item 中
- label-width=“80” 控制所有表单项的宽度
- show-password 可以设置密码输入框的密码隐藏或显示
- clearable 可以清空输入框输入的值
- 注意：双向绑定必须加在控件本身上!而不是加在 el-form-item 上!
<template><h1>表单组件</h1><el-form style="width: 600px;margin: 0 auto;" label-width="80px"><el-form-item label="用户名"><el-input placeholder="请输入用户名" v-model="user.username" clearable></el-input></el-form-item><el-form-item label="密码"><el-input show-password placeholder="请输入密码" v-model="user.password"></el-input></el-form-item><el-form-item label="性别"><el-radio-group v-model="user.gender"><el-radio-button label="男" value="1"></el-radio-button><el-radio-button label="女" value="0"></el-radio-button></el-radio-group></el-form-item><el-form-item label="所在地"><el-select placeholder="请选择所在地" v-model="user.location"><el-option label="北京" value="beijing"></el-option><el-option label="上海" value="shanghai"></el-option><el-option label="深圳" value="shenzhen"></el-option></el-select></el-form-item><el-form-item label="管理员"><el-switch v-model="user.isAdmin"></el-switch></el-form-item><el-form-item><el-button type="success" @click="reg">点我提交</el-button></el-form-item></el-form>
</template><script setup>
import {ref} from "vue";//定义对象用来保存从表单中收集到的数据
const user = ref({username: "",password: "",gender: "1",location: "",isAdmin: false
});
//定义注册方法
const reg = () => {console.log(user.value);console.log(user.value.username);
};
</script>
<style scoped>
</style>
Menu 菜单组件
- mode=“” 修改菜单模式 vertical默认垂直 horizontal水平
- background-color=“” 背景颜色
- text-color=“” 文字颜色
- active-text-color=“” 激活文字颜色
- default-active=“5” 设置默认激活项(默认选中)
- @select=“handleSelect” handleSelect = (index, indexPath) => {}
- index表示选中的当前这个菜单项的index值
- indexPath表示到达当前选中的菜单项需要经过的路径
<template><h1>菜单组件</h1><el-menu mode="horizontal" background-color="#4F8DFE"text-color="#fff" active-text-color="#ff0"@select="handleSelect"><el-menu-item index="1">首页</el-menu-item><el-menu-item index="2">免费课</el-menu-item><el-menu-item index="3">直播课</el-menu-item><el-menu-item index="4">精品课</el-menu-item><el-menu-item index="5">线上班</el-menu-item><el-sub-menu index="6"><template #title>线下班</template><el-menu-item index="6-1">一班</el-menu-item><el-menu-item index="6-2">二班</el-menu-item><el-menu-item index="6-3">三班</el-menu-item></el-sub-menu></el-menu>
</template>
<script setup>
//index指的是用户选择的是哪个菜单项,对应菜单项index的值,比如 3表示选择了"直播课"
//indexPath指的是如何到达当前这个菜单项,比如[6,6-2]可到达"二班"
const handleSelect = (index, indexPath) => {console.log(index, indexPath);
}
</script>
<style scoped>
</style>
Table 表格组件
https://element-plus.org/zh-CN/component/table.html
- :data 表格数据绑定
- prop 表格列对应的源数据属性名
- label 表格列的标题
- width 当前列的宽度
- type=“index” 显示编号，从1开始
- 如果写自定义内容,需要加到template标签中
- 从scope中可获取 $index 表示当前行数据的索引值,默认从0开始
- 从scope中可获取 row 表示当前行数据
<template><h1>表格组件</h1><el-table :data="tableData" style="width: 100%"><el-table-column prop="date" label="日期" width="180" /><el-table-column prop="name" label="姓名" width="180" /><el-table-column prop="address" label="住址" /></el-table><hr><el-table :data="arr" style="width:600px;margin: 0 auto;"><el-table-column type="index" label="编号" width="80" align="center"></el-table-column><el-table-column label="姓名" prop="name" align="center"></el-table-column><el-table-column label="工资" prop="salary" align="center"></el-table-column><el-table-column label="岗位" prop="job" align="center"></el-table-column><el-table-column label="操作"><!-- template表示自定义列模板,如果想要在表格中加入其他的组件,必须加template标签包裹!--><!-- #default代表插槽slot 能够允许我们将其它组件嵌入表格中 --><!-- scope对象用来保存表格的上下文数据scope.row就代表当前行对象,比如当前是用户表,那么scope.row就代表了本行的这个用户对象scope.$index代表当前行对象的索引值,从0开始,注意与上面的序号index(从1开始)区分! --><template #default="scope"><el-button type="danger" @click="del(scope.$index,scope.row)">删除</el-button></template></el-table-column></el-table>
</template><script setup>
import {ref} from "vue";
//编写一个表格,有姓名 工资 岗位三列,把表中的数据展示在页面上
const arr = ref([{name:'张三',salary:'3000',job:'维修员'},{name:'李四',salary:'4000',job:'销售员'},{name:'王五',salary:'5000',job:'护林员'},{name:'赵六',salary:'6000',job:'程序员'}
]);
const del = (index,emp)=>{if (confirm('是否删除?'+emp.name)){arr.value.splice(index,1);}
}
const tableData = [{date: '2016-05-03',name: 'Tom',address: 'No. 189, Grove St, Los Angeles',},{date: '2016-05-02',name: 'Tom',address: 'No. 189, Grove St, Los Angeles',},{date: '2016-05-04',name: 'Tom',address: 'No. 189, Grove St, Los Angeles',},{date: '2016-05-01',name: 'Tom',address: 'No. 189, Grove St, Los Angeles',},
]
</script>
<style scoped>
</style>
Layout 布局组件
https://element-plus.org/zh-CN/component/layout.html#layout
- el-row 均匀等分24份
- el-col :span=“n” 表示当列占n份
- :gutter=“20” 天沟，其实指的是列与列之间的内间距
- :offset=“n” 列偏移，默认值为0，默认靠左，n为几表示向右移动几列
- 布局嵌套：内层充当父元素的元素需要重新作为el-row，它的子元素瓜分它的24列
<template><h1>布局组件</h1><el-row :gutter="20"><el-col :span="6">测试数据</el-col><el-col :span="6">测试数据</el-col><el-col :span="6">测试数据</el-col><el-col :span="6">测试数据</el-col></el-row><h3>两张图</h3><el-row :gutter="10"><el-col :span="12"><img src="2025.png" style="width:100%;"></el-col><el-col :span="12"><img src="2025.png" style="width:100%;"></el-col></el-row><h3>六张图</h3><el-row :gutter="10"><el-col :span="4"><img src="2025.png" style="width:100%;"></el-col><el-col :span="4"><img src="2025.png" style="width:100%;"></el-col><el-col :span="4"><img src="2025.png" style="width:100%;"></el-col><el-col :span="4"><img src="2025.png" style="width:100%;"></el-col><el-col :span="4"><img src="2025.png" style="width:100%;"></el-col><el-col :span="4"><img src="2025.png" style="width:100%;"></el-col></el-row><h3>三张图 宽度为1:2:3</h3><el-row :gutter="10"><el-col :span="4"><img src="2025.png" style="width:100%;"></el-col><el-col :span="8"><img src="2025.png" style="width:100%;"></el-col><el-col :span="12"><img src="2025.png" style="width:100%;"></el-col></el-row><h3>8个等分的列,每列显示数字1 2 3 ...8</h3><el-row :gutter="10"><el-col :span="3" v-for="i in 8">{{i}}</el-col></el-row><h3>列偏移</h3><el-row><!-- :offset="2" 列偏移,默认值为0,默认靠左,写几就是向右移动几列 --><el-col :span="20" :offset="2"><img src="rich.jpg" style="width:100%;"></el-col></el-row><!-- 要求：占12列且居中 --><el-row><el-col :span="12" :offset="6"><img src="rich.jpg" style="width:100%;"></el-col></el-row><!-- 布局嵌套 --><el-row><el-col :span="12" style="border: 3px solid #f00;">左侧</el-col><el-col :span="12" style="border: 3px solid #0f0;"><!-- 嵌套时，一定要把当前元素再看作是一个row,24份,再进行分配! --><el-row><el-col :span="8" style="border: 3px solid #00f;">1</el-col><el-col :span="8" style="border: 3px solid #ff0;">2</el-col><el-col :span="8" style="border: 3px solid #000;">3</el-col></el-row></el-col></el-row>
</template><script setup>
</script><style scoped>
</style>
Container 容器组件
https://element-plus.org/zh-CN/component/container.html
较复杂的页面布局如下图所示：
写页面的时候只需要找到对应的布局，复制代码去修改即可
示例：
<!-- 容器布局 -->
<template><div><!-- 父容器 --><el-container><!-- 头部 --><el-header style="background-color: #0aa1ed;color: #fff;font-size:30px;font-weight: bold;line-height:60px;">智慧车辆管理系统-IVOS</el-header><!-- 子容器 先分上下结构 --><el-container><!-- 左侧部分 --><el-aside width="200px"><el-menu><el-menu-item index="1">用户管理</el-menu-item><el-menu-item index="2">车辆管理</el-menu-item><el-menu-item index="3">围栏管理</el-menu-item></el-menu></el-aside><!-- 主体部分 --><el-main><el-table :data="vehicleArr"><el-table-column label="序号" type="index" align="center" width="80"></el-table-column><el-table-column label="品牌" prop="brand" align="center"></el-table-column><el-table-column label="型号" prop="model" align="center"></el-table-column><el-table-column label="车牌号" prop="license" align="center"></el-table-column><el-table-column label="颜色" prop="color" align="center"></el-table-column><el-table-column label="公里数" prop="km" align="center"></el-table-column></el-table></el-main></el-container></el-container></div>
</template><script setup>
import {ref} from "vue";//定义数组用来模拟从后端请求回来的车辆数据
const vehicleArr = ref([{brand:'奥迪',model:'A8',license:'京A88888',color:'红',km:10000000},{brand:'奥迪',model:'A8',license:'京A88888',color:'红',km:10000000},{brand:'奥迪',model:'A8',license:'京A88888',color:'红',km:10000000},{brand:'奥迪',model:'A8',license:'京A88888',color:'红',km:10000000},{brand:'奥迪',model:'A8',license:'京A88888',color:'红',km:10000000},{brand:'奥迪',model:'A8',license:'京A88888',color:'红',km:10000000},{brand:'奥迪',model:'A8',license:'京A88888',color:'红',km:10000000}
]);
</script><style scoped>
</style>
Carousel 轮播图组件
https://element-plus.org/zh-CN/component/carousel.html
- 所有轮播图项 el-carousel-item 必须放到轮播图 el-carousel 标签中
- trigger=“” 默认值hover悬停切换轮播项,也可设置成click点击切换
- type=“card” 可以修改轮播图以卡片形式切换
<template><h1>El-走马灯组件</h1><el-carousel style="width: 380px;"><el-carousel-item><img src="carousel1.jpg" style="width:100%;height:100%;"></el-carousel-item><el-carousel-item><img src="carousel2.jpg" style="width:100%;height:100%;"></el-carousel-item><el-carousel-item><img src="carousel3.jpg" style="width:100%;height:100%;"></el-carousel-item><el-carousel-item><img src="carousel4.jpg" style="width:100%;height:100%;"></el-carousel-item></el-carousel><!-- trigger="click" 鼠标点击下方指示灯时触发切换,默认悬停切换 --><el-carousel style="width: 380px;" trigger="click"><el-carousel-item><img src="carousel1.jpg" style="width:100%;height:100%;"></el-carousel-item><el-carousel-item><img src="carousel2.jpg" style="width:100%;height:100%;"></el-carousel-item><el-carousel-item><img src="carousel3.jpg" style="width:100%;height:100%;"></el-carousel-item><el-carousel-item><img src="carousel4.jpg" style="width:100%;height:100%;"></el-carousel-item></el-carousel><!-- type="card" 轮播图使用卡片样式 --><el-carousel style="width: 900px;" type="card"><el-carousel-item><img src="carousel1.jpg" style="width:100%;height:100%;"></el-carousel-item><el-carousel-item><img src="carousel2.jpg" style="width:100%;height:100%;"></el-carousel-item><el-carousel-item><img src="carousel3.jpg" style="width:100%;height:100%;"></el-carousel-item><el-carousel-item><img src="carousel4.jpg" style="width:100%;height:100%;"></el-carousel-item></el-carousel>
</template><script setup>
</script><style scoped>
</style>
Card 卡片组件
https://element-plus.org/zh-CN/component/card.html
<template><h1>El-卡片组件</h1><el-row :gutter="10"><el-col :span="6" v-for="item in 4"><el-card><img src="mwzz.png" style="width:100%;"><p>《宝可梦》:妙蛙种子</p><div style="margin-bottom: 40px;"><span style="float: left;">属性:草、毒</span><span style="float: right;">好友:小火龙</span></div></el-card></el-col></el-row>
</template><script setup>
</script><style scoped>
</style>
DateTimePicker 日期时间选择器
https://element-plus.org/zh-CN/component/datetime-picker.html
type属性 定义选择器的类型
- date 日期选择器
- datetime 日期时间
- datetimerange 日期时间范围选择器
- range-separator=“到” 范围选择器中的分隔符
- start-placeholder=“开始啦” 开始日期输入框的提示占位符
- end-placeholder=“结束啦” 结束日期输入框的提示占位符
format属性 定义日期时间的显示值的格式
- YYYY-MM-DD 年月日
- YYYY-MM-DD HH:mm:ss 年月日 时分秒
value-format属性 定义日期时间提交值的格式
- YYYY-MM-DD 年月日
- YYYY-MM-DD HH:mm:ss 年月日 时分秒
@change=“” 事件 监听日期选择,一旦变化立即触发
<template><h1>日期时间选择器组件</h1><el-date-pickertype="date"v-model="rq"format="YYYY-MM-DD"value-format="YYYY-MM-DD"@change="console.log(rq)"></el-date-picker><br><el-date-pickertype="datetimerange"v-model="times"format="YYYY-MM-DD HH:mm:ss"value-format="YYYY-MM-DD HH:mm:ss"start-placeholder="开始啦"end-placeholder="结束啦"range-separator="至"@change="f"></el-date-picker>
</template><script setup>
import {ref} from "vue";
const rq = ref('');
const times = ref([]);
const f = ()=>{console.log(times.value);console.log(times.value[0]);console.log(times.value[1]);
}
</script><style scoped>
</style>
优化
-
解决日期控件默认显示英文问题(汉化)
-
解决表格拖拽页面大小报错BUG
-
6.1修改elementPlus默认中文
-
6.2 app.use(ElementPlus,{ locale: zhCn })将El本地化为中文
-
7.解决ResizeObserver Error
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
//1.引入element-plus组件库与其样式
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
//2.引入element-plus图标库,并起别名为ElementPlusIconsVue
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
//6.1修改elementPlus默认中文
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'const app = createApp(App)/* 创建vue实例,并起名为app */
//3.将所有导入的图标组件变为键值对数组,并依次遍历取出每一个图标组件[key, component]
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {// 4.将当前遍历到的图标组件注册为当前vue实例的全局组件app.component(key, component)
}
//5.为前vue实例应用element-plus组件库
//6.2 app.use(ElementPlus,{ locale: zhCn })将El本地化为中文
app.use(ElementPlus,{ locale: zhCn }).use(store).use(router).mount('#app')//7.解决ResizeObserver Error
const debounce = (fn, delay) => {let timer = null;return function () {let context = this;let args = arguments;clearTimeout(timer);timer = setTimeout(function () {fn.apply(context, args);}, delay);}
}
const _ResizeObserver = window.ResizeObserver;
window.ResizeObserver = class ResizeObserver extends _ResizeObserver {constructor(callback) {callback = debounce(callback, 16);super(callback);}
}