前言
本篇文章是2023年最新黑马JavaWeb开发笔记09:ElementUI代码进入教程、常用组件使用的总结,帮助需要学习Web开发的朋友温故而知新。
- ElementUI代码引入
- 常用组件使用
ElementUI
- 介绍
- Element:饿了么公司前端开发团队提供的一套基于 Vue 的网站组件库,用于快速构建网页
- Element 提供了很多**组件(组成网页的部件)**供我们使用
- 例如:超链接、按钮、图片、表格等等。
- 如下图所示就是我们开发的页面和ElementUI提供的效果对比:可以发现ElementUI提供的各式各样好看的按钮
- 作为一个后台开发者,只需要学会如何从ElementUI的官网拷贝组件到我们自己的页面中,并且做一些修改即可。
- 其官网地址:https://element.eleme.cn/#/zh-CN
1. 快速入门(代码引入教程)
- 首先,我们先要安装ElementUI的组件库,打开VS Code,停止之前的项目,然后在命令行输入如下命令:
npm install element-ui@2.15.3
- 注意:要打开完整的文件夹,否则是找不到在集成终端打开的这个选项的
- 这里我直接在软件里打开终端下载会报错,需要用管理员身份打开终端找到这个项目再执行下载指令才可以,如果安装失败的朋友可以试试用管理员身份打开终端。
- 然后我们需要在main.js这个入口js文件中引入ElementUI的组件库
- 方法参照element官方文档,具体寻找如下图:
- 对照文件代码,把缺的这三行代码直接复制粘贴到自己的main.js文件中
-
然后我们需要按照vue项目的开发规范,在src/views目录下创建一个vue组件文件,注意组件名称后缀是.vue,并且在组件文件中编写之前介绍过的基本组件语法
-
最后我们只需要去ElementUI的官网,找到组件库,然后找到按钮组件,复制代码段
-
紧接着粘贴组件代码到我们的vue组件文件中
-
最后,我们需要在默认访问的根组件src/App.vue中引入我们自定义的组件
-
然后运行我们的vue项目,浏览器直接访问之前的7000端口
2. 组件:Table表格
Table 表格:用于展示多条结构类似的数据,可对数据进行排序、筛选、对比或其他自定义操作
- 在官网复制喜欢的表格代码
- 复制粘贴< template >代码:
- 复制粘贴< script >代码:
- 最后ctrl+s保存之后看一下网页:
- 那么ElementUI是如何将数据模型绑定到视图的呢?主要通过如下几个属性:
- data: 主要定义table组件的数据模型
- prop: 定义列的数据应该绑定data中定义的具体的数据模型
- label: 定义列的标题
- width: 定义列的宽度
- 具体示例含义如下图所示:
3. 组件:Pagination分页
- Pagination: 分页组件,主要提供分页工具条相关功能。其展示效果图下图所示:
- 直接在官网找分页组件:
- 复制粘贴到我们自己的代码里面:
- 保存代码然后查看网页:
- 对于分页组件我们需要关注的是如下几个重要属性(可以通过查阅官网组件中最下面的组件属性详细说明得到)
- background: 添加背景颜色,也就是上图蓝色背景色效果。
- layout: 分页工具条的布局,其具体值包含 sizes , prev , pager , next , jumper , -> , total , slot 这些值
- total: 数据的总数量
- 在原来的功能上,添加了一些额外的功能,其具体对应关系如下图所示:
- 对于分页组件还有2个非常重要的事件需要学习:
- size-change : pageSize 改变时会触发
- current-change :currentPage 改变时会触发
4. 组件:Dialog对话框
Dialog: 在保留当前页面状态的情况下,告知用户并承载相关操作。
其企业开发应用场景示例如下图所示:
- ElementUI是通过如下的属性做到对话框的显示与隐藏的:visible.sync :是否显示 Dialog
- visible属性绑定的dialogTableVisble属性一开始默认是false,所以对话框隐藏;然后我们点击按钮,触发事件,修改属性值为true,
- 然后对话框visible属性值为true,所以对话框呈现出来
5. 组件:Form表单
- Form 表单:由输入框、选择器、单选框、多选框等控件组成,用以收集、校验、提交数据
- 表单在前端的开发中使用的还是比较多的
-
制作一个新的对话框,其代码如下
-
还需要注意的是,针对这个新的对话框,我们需要在data中声明新的变量dialogFormVisible来控制对话框的隐藏与显示
-
复制官网提供的template部分代码到我们的vue组件文件的Dialog组件中,但是,此处官方提供的表单项标签太多,所以我们只需要保留前面3个表单项组件,其他多余的删除
-
表单项标签使用了v-model双向绑定,所以我们需要在vue的数据模型中声明变量,同样可以从官方提供的代码中复制粘贴,但是我们需要去掉我们不需要的属性,通过观察上述代码,我们发现双向绑定的属性有4个,分别是form.name,form.region,form.date1,form.date2
-
官方的代码中,在script部分中,还提供了onSubmit函数,表单的立即创建按钮绑定了此函数,我们可以输入表单的内容,而表单的内容是双向绑定到form对象的,所以我们修改官方的onSubmit函数如下即可,而且我们还需要关闭对话框
-
打开浏览器,我们打开对话框,并且输入表单内容,点击立即创建按钮,呈现如下效果
总结
本篇文章是2023年最新黑马JavaWeb开发笔记09:ElementUI代码进入教程、常用组件使用的总结,帮助需要学习Web开发的朋友温故而知新。