ElementUI概述
ElementUI: 是饿了么公司前段开发团队提供的一套基于Vue框架的网站组件库, 用于快速构建网页
组件: 组成网页的部件
- 例如: 超链接, 按钮, 图片, 表格等等
ElementUI快速入门:
- 引入Element的CSS和JS文件
- 由于ElementUI是基于Vue框架实现的一款网站组件库, 所以我们在引入Element中的CSS文件和JS文件的时候就要先引入Vue框架的JS文件
- 创建Vue核心对象
<script>
new Vue({
el: "#app", //设置Vue核心对象的挂载位置, 这里就是表示挂载到我们的id属性为app的标签上
})
</script>- 官网复制ElementUI组件代码:
ElementUI布局:
ElementUI中有两种布局方式:
- Layout布局: 通过组件的基础的24分栏, 迅速简便的创建布局
- el-row标签: 表示一行
- el-col标签: 表示一个单元格
- el-col中有一个"span"属性用来设置这个单元格占几个分栏
- container布局容器: 用于布局的组件容器, 方便快捷的搭建页面的基本内容
- 其实就是从ElementUI官方组件库中找一个写好的布局, 然后我们拿来直接修改之后使用即可
ElementUI_ 常用组件之表格
表格标签为: < el-table> < /el-table>
表格中的一列就是: < el-table-column> < el-table-column>
- el-table标签中的属性
- prop : 对应列内容的属性名
- align : 列内容的对齐方式
- 我们的表格中也是可以加复选框的,如果我们给表格加了一个复选框之后我们可以给el-table标签中写一个@selection-change事件, 当我们的表格中的对应的复选框被选中的时候就会触发对应的事件
补充:
在我们复制ElementUI组件库中的组件源码的时候我们会发现有一个: & : last-child , 这个是一个伪类选择器
补充二:
使用npm指令下载了ElementUI库之后还要在main.js中导入对应的ElementUI库的js和css文件
- 就和下载了vue和vue-router一样,下载之后要导入对应的js文件一样
- 我们的vue就是一个js框架, 所以其实就是一个js文件, 我们的elementui是一个基于vue的组件库, 是一个js文件加一个css文件
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
