知识点10--element ui
本章介绍一个前端渲染框架叫element UI，是一个基于vue开发的组件库，它就相当于jquery的插件，不过它的作用和CSS的Bootstrap有些类似，具体更详细的了解大家可以去官网看一看https://element.eleme.cn/#/zh-CN/component/quickstart
你可以把它理解成一个含有CSS样式能力的渲染框架，后面给大家演示的时候一看就能明白，它本质上就是在单一的样式上加入了渲染效果，分为css和js两块代码，这是vue近些年在前端为什么这么火的原因，因为培养成本低，这就和python语言在人工智能领域很火一样，本质上并不是语言或框架的本身有多优秀，而是这个框架或语言对于企业来说，用人或培养成本低，开发快，就比如在人工智能领域写一个贝叶斯算法用来预测输入法用户的输入，如果你不用python语言，你要自己去搭建模型，自己去测试算法，这还是最简单的算法，再难一点的你要加入神经网络，所以从零培养一个人工智能开发人员的成本根本不是一个小企业能够负担得起的，所以大家不要把企业给你的目标当做自己的技术目标，要去多看一看底层的东西，言归正传我们开看一下element ui的使用
首先element ui在官网为我们提到了两种引用方式，一种是vue独立项目的npm方式，第二种是把资源包全部下载下来，导入到项目中，引用对应的文件即可，本篇为了方便就用第二种方式中的官方路径了，不再单独下载。
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
先来看一下布局组件，element的布局组件其实就是在bootstrap网格的效果上加了渲染而已，不过element的布局组件总计24格网格，不可缺少，比如一行那就整个24格，如果你分两行那就是每行12格，官网上有代码，可以直接c+v过来
DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>title>
<script src="js/vue.js">script>
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<script src="https://unpkg.com/element-ui/lib/index.js">script>
head>
<body>
<div id="app">
<el-row :gutter="20">
<el-col :span="8"><div class="grid-content bg-purple-dark">123div>el-col>
<el-col :span="8"><div class="grid-content bg-purple-light">div>el-col>
<el-col :span="8"><div class="grid-content bg-purple-dark">div>el-col>
el-row>
div>
body>
<script type="text/javascript">
let app = new Vue({
el:"#app"
})
script>
<style>
.el-row {
margin-bottom: 20px;
&:last-child {
margin-bottom: 0;
}
}
.el-col {
border-radius: 4px;
}
.bg-purple-dark {
background: #99a9bf;
}
.bg-purple {
background: #d3dce6;
}
.bg-purple-light {
background: #e5e9f2;
}
.grid-content {
border-radius: 4px;
min-height: 36px;
}
.row-bg {
padding: 10px 0;
background-color: #f9fafc;
}
style>
html>
下过如下
官网给了你很多的例子，而且官网上如何控制网格间距等都给你了，使用起来就和bootstrap一模一样，导入vue后cv代码就行了
你要是不想用上面的普通网格，element给你提供了一种网格容器，给你准备了一个表格类似的Container ，对于Container 我要给大家解释一下它的布局顺序，因为官网上原话有点笼统，官网上有价值的原话是这样说的：
外层容器。当子元素中包含
以上组件采用了 flex 布局，使用前请确定目标浏览器是否兼容。此外，
这两句话我要给大家解释一下方便大家理解，首先第二句话是告诉我们整个的Container网格布局容器由container、header、aside、main、footer五个标签构成的，可限制就是父子关系不能颠倒，container永远要在其他四个的外层，反之也一样，但是这个限制只生效于一组容器标签内，就是说如果你写了这么一组容器标签，内部再出现一个新的container那就是另一个新的容器了，两个容器在父子标签限制上没有冲突，同理你可以用container作为容器的分界点
再之后是第一句话，它描述的有些不完全，在你实际使用的时候你就会发现，你可以按照你的需要嵌套多个容器，而不同的container容器之间默认一定是左右排列，但是如果中间出现一个container容器包含了 header 或 footer，那么该容器内的标签都会以上下排列，同时会影响被它包含的容器，但是排列影响只止步于被嵌套容器的摆放位置，不影响被嵌套容器的内部
我下面的例子帮助大家理解
DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>title>
<script src="js/vue.js">script>
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<script src="https://unpkg.com/element-ui/lib/index.js">script>
head>
<body>
<div id="app">
<el-container>
<el-aside width="200px">Asideel-aside>
<el-container>
<el-header>Headerel-header>
<el-main>
<el-container>
<el-aside width="200px">Asideel-aside>
el-container>
<el-container>
<el-aside width="200px">Asideel-aside>
<el-main>mainel-main>
el-container>
el-main>
<el-footer>Footerel-footer>
el-container>
el-container>
div>
body>
<script type="text/javascript">
let app = new Vue({
el:"#app"
})
script>
<style>
.el-header, .el-footer {
background-color: #B3C0D1;
color: #333;
text-align: center;
line-height: 60px;
}
.el-aside {
background-color: #D3DCE6;
color: #333;
text-align: center;
line-height: 200px;
}
.el-main {
background-color: #E9EEF3;
color: #333;
text-align: center;
line-height: 160px;
}
body > .el-container {
margin-bottom: 40px;
}
.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
line-height: 260px;
}
.el-container:nth-child(7) .el-aside {
line-height: 320px;
}
style>
html>
效果
本章的最后我强调一下element的表格，官网的代码，不要完全拷贝，有的东西是不需要的
DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>title>
<script src="js/vue.js">script>
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<script src="https://unpkg.com/element-ui/lib/index.js">script>
head>
<body>
<div id="app">
<el-table :data="tableData" style="width: 100%">
<el-table-column prop="date" label="日期" width="180">el-table-column>
<el-table-column prop="name" label="姓名" width="180">el-table-column>
<el-table-column prop="address" label="地址">el-table-column>
el-table>
div>
body>
<script type="text/javascript">
let app = new Vue({
el: "#app",
data: {
tableData: [{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄'
}, {
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄'
}, {
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄'
}]
}
})
script>
<style>
style>
html>
注意:data="tableData"这个是指定表格展示的数据是谁
效果如下
最后说一下，之所以不需要全部cv过来是因为官网上的代码是babel规范编译后的代码，babel是一个新一代的js编译器，在细节上和我们目前主流的写法有些差异，它还没有推广开