开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> 初识Vue&ElementUI -> 正文阅读

[JavaScript知识库]初识Vue&ElementUI

初识Vue

本文主要是对Vue进行一个大致的了解，能够用Vue实现JavaWeb中一些简单的效果，后面再进行系统的学习

学习站点：Vue.js 教程 | 菜鸟教程

1、Vue概述

Vue是什么？

Vue原名Vue.js，是一个基于MVVM思想并开源的JavaScript框架，主要用于简化前端开发，提高前端开发的效率。

官网：🚪床送门
Vue的作用是什么？
1. 提高前端开发效率。符合框架的一般性特点，能够简化开发
2. 更高的交互性。Vue会自动跟踪 JavaScript 状态变化并在改变发生时响应式地更新 DOM（视图和模型的双向绑定）
什么是MVVM？

MVVM（Model-View-ViewModel）是一种架构模式，是MVC模式的改进版。MVVM实现了数据的双向绑定¹，解决了MVC模式只能实现模型到视图的单向展示。

2、Vue初体验

任务：使用vue实现视图和模型双向绑定

引入vue.js库

编写html

测试

废话不多说直接上代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue快速入门</title>
    <script src="../js/vue.js"></script>
</head>
<body>
<!--一个容器，所有的html代码放在里面，能够被vue控制-->
<div id="app">
    <!--实现视图和模型双向绑定-->
    <input type="text" v-model="username">
    <!--插值表达式-->
    {{username}}
</div>

<script>
    //1、创建vue核心对象
    new Vue({
        el:"#app",
        /*
        data:function () {
            return{
                username:""
            }
        }*/
        data(){
            return{
                username:""
            }
        }
    })
</script>
</body>
</html>

效果展示：

代码执行流程分析：

3、Vue常用指令

vue的指令通常都是带有v-开头的

常见Vue指令：

指令	作用
`v-bind`	为HTML标签绑定属性值，如设置 href , css样式等
`v-model`	在表单元素上创建双向数据绑定
`v-on`	为HTML标签绑定事件
`v-if`	条件性的渲染某元素，判定为true时渲染,否则不渲染
`v-else`
`v-else-if`
`v-show`	根据条件展示某元素，区别在于切换的是display属性的值
`v-for`	列表渲染，遍历容器的元素或者对象的属性

v-bind和v-model代码演示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <a v-bind:href="url">点击一下</a>
    <!--简化写法-->
    <a :href="url">点击一下</a>
    <input v-model="url">
</div>

<script src="js/vue.js"></script>
<script>
    //1. 创建Vue核心对象
    new Vue({
        el:"#app",
        data(){
            return {
                username:"",
                url:"https://www.baidu.com"
            }
        }
    });
</script>
</body>
</html>

v-bind:href能够实现动态获取url，相比于原生的href显得更加灵活

测试结果：

v-on代码演示：

<input type="button" value="一个按钮" v-on:click="show()">
<!--简化写法-->
<input type="button" value="一个按钮" @click="show()">
<!--show方法后的括号可写可不写-->

new Vue({
    el: "#app",
    methods: {
        show(){
            alert("我被点了");
        }
    }
});

效果演示：

条件判断指令代码演示：

v-show和v-if的效果是一样的，只要当v-show中条件满足就会展示标签中的内容

两者的主要区别：

v-show隐藏的标签内容，是通过设置display=none实现的，能够右击在浏览器中检查出来
v-if是直接不展示标签，在浏览器中无法查看

    <div v-if="count > 0">div1</div>
	<div v-show="count > 0">div1</div>
<!--这两个标签的效果是等价的-->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <div v-if="count > 0">div1</div>
    <div v-else-if="count < 0">div2</div>
    <div v-else>div3</div>
    <hr>
    <input v-model="count">
</div>

<script src="../js/vue.js"></script>
<script>
    //1. 创建Vue核心对象
    new Vue({
        el:"#app",
        data(){
            return {
                count:3
            }
        }
    });
</script>
</body>
</html>

效果展示：

v-for的代码展示：

基本语法：

<标签 v-for="变量名 in 集合模型数据">
    {{变量名}}
</标签>
<!--如果遍历集合数据类型-->
<标签 v-for="(变量名,索引变量) in 集合模型数据">
    <!--索引变量是从0开始，所以要表示序号的话，需要手动的加1-->
   {{索引变量 + 1}} {{变量名}}
</标签>

备注：哪个标签要遍历v-for，就添加在哪个标签上，标签遍历多少次，就会在网页上生成多少个标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <div v-for="addr in addrs">
        {{addr}} <br>
    </div>

    <hr>
    <div v-for="(addr,i) in addrs">
        {{i+1}}--{{addr}} <br>
    </div>
</div>

<script src="../js/vue.js"></script>
<script>

    //1. 创建Vue核心对象
    new Vue({
        el:"#app",
        data(){
            return {
                addrs:["北京","上海","西安"]
            }
        }
    });
</script>
</body>
</html>

效果展示：

4、Vue生命周期

生命周期的八个阶段：创建前/后，载入前/后，更新前/后，销毁前/后。

每触发一个生命周期事件，会自动执行一个生命周期方法，这些生命周期方法也被称为钩子方法。

代码演示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/vue.js"></script>
</head>
<body>


<script>
    new vue({
        el:"#app",
        data(){
            return{
                username:"",
                url:"https://www.baidu.com",
                count:3,
                addrs:["北京","上海","广州"]
            }
        },
        methods:{
            show(){
                alert("不要点我");
            }
        },
        /*原始写法：
        mounted:function () {
        }*/
        mounted(){
            alert("加载完成");
        }
    })
</script>
</body>
</html>

案例演示：

使用的是上一篇文章的案例，详细步骤这里就不赘述了。

感兴趣的可以回看一下：??一文快速搞懂JSON

使用Vue优化后的代码：

brand.html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>展示所有数据的也买你</title>
    <!--引入axios.js库-->
    <script src="../js/axios-0.18.0.js"></script>
    <!--引入vue.js库-->
    <script src="../js/vue.js"></script>
</head>
<body>
<div id="app">
    <a href="addBrand.html"><input type="button" value="新增"></a><br>
    <hr>
    <table id="brandTable" border="1" cellspacing="0" width="100%">
        <!--Vue需要表头，原生不需要，因为它是直接拼接字符串-->
        <tr>
            <th>序号</th>
            <th>品牌名称</th>
            <th>企业名称</th>
            <th>排序</th>
            <th>品牌介绍</th>
            <th>状态</th>
            <th>操作</th>
        </tr>
        <!--使用v-for遍历tr-->
        <tr v-for="(brand,i) in brands" align="center">
            <td>{{i + 1}}</td>
            <td>{{brand.brandName}}</td>
            <td>{{brand.companyName}}</td>
            <td>{{brand.ordered}}</td>
            <td>{{brand.description}}</td>
            <td>{{brand.statusStr}}</td>
            <td><a href="#">修改</a> <a href="#">删除</a></td>
        </tr>
    </table>
</div>

<script>

    /* 原始JS操作，拖沓冗长，含有大量重复的DOM操作，代码重复率高
        //当页面加载完成后，发送AJAX请求
        window.onload = function () {
            //1、发送AJAX请求
            axios({
                method:"post",
                url:"http://localhost:8080/day13_brand-demo/selectAllServlet"
            }).then(function (resp) {
                //2、获取响应数据
                let brands = resp.data;
                //显示表头数据，表头不参与遍历
                let tableData =
                    "<tr>\n" +
                    "        <th>序号</th>\n" +
                    "        <th>品牌名称</th>\n" +
                    "        <th>企业名称</th>\n" +
                    "        <th>排序</th>\n" +
                    "        <th>品牌介绍</th>\n" +
                    "        <th>状态</th>\n" +
                    "        <th>操作</th>\n" +
                    "    </tr>";
                //3、遍历JSON字符串数组，获取数组中每一个brand对象
                for (let i = 0; i < brands.length; i++) {
                    let brand = brands[i];
                     tableData += "\n"+
                        "<tr align=\"center\">\n" +
                            "        <td>"+(i+1)+"</td>\n" +
                            "        <td>"+brand.brandName+"</td>\n" +
                            "        <td>"+brand.companyName+"</td>\n" +
                            "        <td>"+brand.ordered+"</td>\n" +
                            "        <td>"+brand.description+"</td>\n" +
                            "        <td>"+brand.statusStr+"</td>\n" +
                            "        <td><a href=\"#\">修改</a> <a href=\"#\">删除</a></td>\n" +
                            "    </tr>";
                }
                //将数据在表格中显示
                document.querySelector("#brandTable").innerHTML = tableData;//切记别给tableData加引号
            });
        }
     */

    /**
     * 使用Vue优化DOM操作
     * 1、用一个id为app的div将所有body里面的html代码包裹起来
     */
    new Vue({
        el: "#app",
        //2、将对象变成模型（作用域提升成全局变量了），这样就能在html标签中使用了
        data() {
            return {
                brands: []
            }
        },
        mounted() {
            //3、页面加载后，发送AJAX请求
            //axios里面的this指的是Window对象，所以需要手动设置一个this变量
            var _this = this;//将Vue对象赋值给_this变量
            axios({
                method: "post",
                url: "http://localhost:8080/day13_brand-demo/selectAllServlet"
            }).then(function (resp) {
                //4、将Servlet响应回来的数据展示到网页上
                //axios里面的this指的是Window对象，因为axios由浏览器发送，我们需要的是Vue对象
                //this.brands = resp.data;
                _this.brands = resp.data;
            })
        }
    })
</script>
</body>
</html>

这Vue用到也太爽了吧O(∩_∩)O

addBrand.html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>数据添加页面</title>
    <!--引入axios库-->
    <script src="../js/axios-0.18.0.js"></script>
    <script src="../js/vue.js"></script>
</head>
<body>
<div id="app">
    <h3>添加品牌</h3>
    <form action="" method="post">
        品牌名称：<input id="brandName" v-model="brand.brandName" name="brandName"><br>
        企业名称：<input id="companyName" v-model="brand.companyName" name="companyName"><br>
        排序：<input id="ordered" v-model="brand.ordered" name="ordered"><br>
        描述信息：<textarea rows="5" cols="20" id="description" v-model="brand.description" name="description"></textarea><br>
        状态：
        <input type="radio" v-model="brand.status" name="status" value="0">禁用
        <input type="radio" v-model="brand.status" name="status" value="1">启用<br>

        <input type="button" id="btn" v-on:click="submitForm" value="提交">
    </form>
</div>
</body>
<script>
    /*
    //原生JS
    //给按钮绑定一个点击事件，一旦点击提交按钮就发送给AJAX请求，实现局部刷星
    document.querySelector("#btn").onclick = function () {
        //0、将表单数据转换成JSON字符串
        var formData = {
            brandName : "",
            companyName : "",
            ordered : "",
            description : "",
            status : "",
        }
        //获取数据
        let brandName =  document.querySelector("#brandName").value;
        let companyName =  document.querySelector("#companyName").value;
        let ordered =  document.querySelector("#ordered").value;
        let description =  document.querySelector("#description").value;
        let status =  document.getElementsByName("status");//重点、难点！
        //设置数据
        formData.brandName = brandName;
        formData.companyName = companyName;
        formData.ordered = ordered;
        formData.description = description;
        for (let i = 0; i < status.length; i++) {
            if(status[i].checked){
                //被选中，获对应的值
                formData.status = status[i].value;
            }
        }
        console.log(formData.status);

        //1、发送AJAX请求
        axios({
            method:"post",
            url:"http://localhost:8080/day13_brand-demo/addServlet",
            data:{
                brandName:formData.brandName,
                companyName:formData.companyName,
                ordered:formData.ordered,
                description:formData.description,
                status:formData.status
            }
        }).then(function (resp) {
            //判断响应是否成功
            if("success" == resp.data){
                location.href = "http://localhost:8080/day13_brand-demo/html/brand.html";
            }else{
                alert("数据添加失败，数据添不能为空！")
            }
        });
    }
*/

    /**
     * 采用Vue
     * 1、使用一个id为app的div将body里面的html的代码套起来
     * 2、使用v-on给提交按钮绑定点击事件
     * 4、使用v-model对标签进行数据的双向绑定
     */
    new Vue({
        el: "#app",
        //设置模型，将来自用户输入的数据和模型绑定，遮样可以使用Vue对象让axios访问，然后发送到Servlet
        data(){
            return{
                brand:{}
            }
        },
        methods:{
            submitForm(){
                //3、向Servlet发送AJAX请求
                //将Vue对象转换成一个变量，方便在axios中访问，axios中的this对象是Window对象
                var vue = this;
                axios({
                    method: "post",
                    url:"http://localhost:8080/day13_brand-demo/addServlet",
                    data:vue.brand
                }).then(function (resp) {
                    //判断响应是否成功
                    if("success" == resp.data){
                        location.href = "http://localhost:8080/day13_brand-demo/html/brand.html";
                    }else{
                        alert("数据添加失败，数据添不能为空！")
                    }
                });
            }
        }
    });
</script>
</html>

效果展示：

PS：使用Vue的效果和原生JS也是一样的，但是使用Vue相对原生JS的DOM操作而言真的是太简便了，太爱了。而且我这还是一个简单的小案例，可想而知在真实的项目开发中，Vue能减少多少代码。真的是太佩服发明框架的那群（那个）大好人了p(≧▽≦)q(′▽`???)

被这个XX（眼瞎+手抖）错误给搞吐了┭┮﹏┭┮（这个该死的错误还没有提示，只是提示submitForm未定义，问题是网上还有好多关于函数未定义的解决方案，我愣是试了好多遍，改bug要了我半条命）

初识ELment

1、Elment概述

Elment是由饿了么前端开发团队提供的一套基于Vue2.0的网站组件²库，用于快速构建网页。

官网：Element - 网站快速成型工具

Element是什么？

是由饿了么前端开发团队提供的一套基于Vue2.0的网站组件库。
Element的作用？

为开发着提供好看且实用的组件，帮助开发者更快地构建网站。
Element的特点：
- 一致性 Consistency
- 反馈 Feedback
- 效率 Efficiency
- 可控 Controllability

2、Elment快速入门

引入Vue的js库

引入Element的js文件
和Element的css文件

去官网拷贝代码

修改数据

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格组件的使用</title>
    <script src="../js/vue.js"></script>
    <script src="../element-ui/lib/index.js"></script>
    <link rel="stylesheet" href="../element-ui/lib/theme-chalk/index.css">
    
    <style>
        .el-table .warning-row {
            background: oldlace;
        }
        .el-table .success-row {
            background: #f0f9eb;
        }
    </style>
</head>
<body>
<div id="app">
    <!--搜索表单-->
    <el-form :inline="true" :model="brand" class="demo-form-inline">
        <el-form-item label="当前状态">
            <el-select v-model="brand.status" placeholder="当前状态">
                <el-option label="启用" value="1"></el-option>
                <el-option label="禁用" value="0"></el-option>
            </el-select>
        </el-form-item>

        <el-form-item label="企业名称">
            <el-input v-model="brand.companyName" placeholder="企业名称"></el-input>
        </el-form-item>

        <el-form-item label="品牌名称">
            <el-input v-model="brand.brandName" placeholder="品牌名称"></el-input>
        </el-form-item>

        <el-form-item>
            <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>
    </el-form>

    <!--按钮-->
    <el-row>
        <el-button type="danger" plain>批量删除</el-button>
        <el-button type="primary" plain @click="dialogVisible = true">新增</el-button>
    </el-row>

    <!--添加数据对话框表单-->
    <el-dialog
            title="编辑品牌"
            :visible.sync="dialogVisible"
            width="30%">
        <el-form ref="form" :model="brand" label-width="80px">
            <el-form-item label="品牌名称">
                <el-input v-model="brand.brandName"></el-input>
            </el-form-item>

            <el-form-item label="企业名称">
                <el-input v-model="brand.companyName"></el-input>
            </el-form-item>

            <el-form-item label="排序">
                <el-input v-model="brand.ordered"></el-input>
            </el-form-item>

            <el-form-item label="备注">
                <el-input type="textarea" v-model="brand.description"></el-input>
            </el-form-item>

            <el-form-item label="状态">
                <el-switch v-model="brand.status"
                           active-value="1"
                           inactive-value="0"
                ></el-switch>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="addBrand">提交</el-button>
                <el-button @click="dialogVisible = false">取消</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>

    <!--表格-->
    <template>
        <el-table
                :data="tableData"
                style="width: 100%"
                :row-class-name="tableRowClassName"
                @selection-change="handleSelectionChange">
            <el-table-column
                    type="selection"
                    width="55">
            </el-table-column>
            <el-table-column
                    type="index"
                    width="50">
            </el-table-column>
            <el-table-column
                    prop="brandName"
                    label="品牌名称"
                    align="center">
            </el-table-column>
            <el-table-column
                    prop="companyName"
                    label="企业名称"
                    align="center">
            </el-table-column>
            <el-table-column
                    prop="ordered"
                    align="center"
                    label="排序">
            </el-table-column>
            <el-table-column
                    prop="status"
                    align="center"
                    label="当前状态">
            </el-table-column>
            <el-table-column
                    align="center"
                    label="操作">
                <el-row>
                    <el-button type="primary">修改</el-button>
                    <el-button type="danger">删除</el-button>
                </el-row>
            </el-table-column>

        </el-table>
    </template>

    <!--分页工具条-->
    <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[5, 10, 15, 20]"
            :page-size="5"
            layout="total, sizes, prev, pager, next, jumper"
            :total="400">
    </el-pagination>

</div>
<script>
    new Vue({
        el: "#app",
        methods: {
            tableRowClassName({row, rowIndex}) {
                if (rowIndex === 1) {
                    return 'warning-row';
                } else if (rowIndex === 3) {
                    return 'success-row';
                }
                return '';
            },
            // 复选框选中后执行的方法
            handleSelectionChange(val) {
                this.multipleSelection = val;

                console.log(this.multipleSelection)
            },
            // 查询方法
            onSubmit() {
                console.log(this.brand);
            },
            // 添加数据
            addBrand(){
                console.log(this.brand);
            },
            //分页
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
            },
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
            }
        },
        data() {
            return {
                // 当前页码
                currentPage: 4,
                // 添加数据对话框是否展示的标记
                dialogVisible: false,

                // 品牌模型数据
                brand: {
                    status: '',
                    brandName: '',
                    companyName: '',
                    id:"",
                    ordered:"",
                    description:""
                },
                // 复选框选中数据集合
                multipleSelection: [],
                // 表格数据
                tableData: [{
                    brandName: '华为',
                    companyName: '华为科技有限公司',
                    ordered: '100',
                    status: "1"
                }, {
                    brandName: '华为',
                    companyName: '华为科技有限公司',
                    ordered: '100',
                    status: "1"
                }, {
                    brandName: '华为',
                    companyName: '华为科技有限公司',
                    ordered: '100',
                    status: "1"
                }, {
                    brandName: '华为',
                    companyName: '华为科技有限公司',
                    ordered: '100',
                    status: "1"
                }]
            }
        }
    })
</script>
</body>
</html>

3、Element标签、属性说明

想要说明组件就只需要将代码拷贝下来就行了，哪里不懂删哪里，修修改改就是我的了😆

3.1 按钮组件

<!DOCTYPE html>
<html lang="en">
<!--Element按钮组件演示-->
<head>
    <meta charset="UTF-8">
    <title>Element初体验</title>
    <!--引入vue.js库-->
    <script src="../js/vue.js"></script>
    <!--引入element的js文件-->
    <script src="../element-ui/lib/index.js"></script>
    <!--element的css文件-->
    <link rel="stylesheet" href="../element-ui/lib/theme-chalk/index.css">
</head>
<body>
<div id="app">
    <el-row>
        <el-button type="danger">危险按钮</el-button>
    </el-row>
</div>
</body>
<script>
    /**
     * 1、引入Vue所需js库
     * 2、引入Element所需要的js和css文件
     * 3、创建一个id为app的div，代码写在该div中
     */
    new Vue({
        el: "#app"
    });
</script>
</html>

3.2 表格组件介绍

handleSelectionChange：复选框选中后执行的方法

$给复选框绑定事件\rightarrow{编写事件方法}\rightarrow{绑定数据}$

需要在模型中设置复选框选中后数据，这样当我们点击复选框是，复选框中所有的数据就能被Vue对象获取

示例：

3.3 表单组件

捋一捋表单提交的工作流程：表单绑定模型数据，当我们点击查询按钮，就会触发查询表单的onSubmit事件，然后就会将页面上用书输入的数据传递给模型（视图绑定模型），然后通过Vue对象可以将模型数据传递给axios对象，然后通过axios对象将数据发送给对应的Servlet，Servlet（表现层）调用Service方法（业务逻辑层）的方法，业务逻辑层再调用Mapper接口（数据访问层）中的方法从数据库中获取数据，最终返回给Service（业务逻辑层），Service层将数据再传递给Servlet，最终Servlet将数据进行封装响应给HTML。

3.4 对话框组件

使用对话框，一般需要先设置一个按钮，由按钮触发对话框。

对话框中表单的表单信息：

绑定模型数据的目的，是为了让Vue对象能获取到表单中的数据，然后通过Vue将数据传递给axios

比如前面的案例演示，就是这里原理：

效果展示：

3.5 分页工具条组件

效果展示：

3. 布局组件

Layout布局

<!DOCTYPE html>
<html lang="en">
<!--Layout布局演示-->
<head>
    <meta charset="UTF-8">
    <title>体验Element的Layout布局</title>
    <!--引入vue.js库-->
    <script src="../js/vue.js"></script>
    <!--引入element的js文件-->
    <script src="../element-ui/lib/index.js"></script>
    <!--element的css文件-->
    <link rel="stylesheet" href="../element-ui/lib/theme-chalk/index.css">

    <style>
        .el-row {
            margin-bottom: 20px;
        }
        .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>
</head>
<body>
<div id="app">
    <el-row>
        <el-col :span="24"><div class="grid-content bg-purple-dark"></div></el-col>
    </el-row>
    <el-row>
        <el-col :span="12"><div class="grid-content bg-purple"></div></el-col>
        <el-col :span="12"><div class="grid-content bg-purple-light"></div></el-col>
    </el-row>
    <el-row>
        <el-col :span="8"><div class="grid-content bg-purple"></div></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"></div></el-col>
    </el-row>
    <el-row>
        <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
        <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
        <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
        <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
    </el-row>
    <el-row>
        <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
        <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
        <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
        <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
        <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
        <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
    </el-row>
    <hr>
    <!--
    需求：创建八个格子的布局
    一行占24个小格子，如果创建8个格子，则每个格子占：24/8 = 3个小鬼子
    -->
    <el-row>
        <el-col :span="3"><div class="grid-content bg-purple"></div></el-col>
        <el-col :span="3"><div class="grid-content bg-purple-light"></div></el-col>
        <el-col :span="3"><div class="grid-content bg-purple"></div></el-col>
        <el-col :span="3"><div class="grid-content bg-purple-light"></div></el-col>
        <el-col :span="3"><div class="grid-content bg-purple"></div></el-col>
        <el-col :span="3"><div class="grid-content bg-purple-light"></div></el-col>
        <el-col :span="3"><div class="grid-content bg-purple"></div></el-col>
        <el-col :span="3"><div class="grid-content bg-purple-light"></div></el-col>
    </el-row>
</div>
</body>
<script>
    /**
     * 1、引入Vue所需js库
     * 2、引入Element所需要的js和css文件
     * 3、创建一个id为app的div，代码写在该div中
     */
    new Vue({
        el: "#app"

    });
</script>
</html>

Container布局

<!DOCTYPE html>
<html lang="en">
<!--Container演示-->
<head>
    <meta charset="UTF-8">
    <title>体验Element的Cantainer布局</title>
    <!--引入vue.js库-->
    <script src="../js/vue.js"></script>
    <!--引入element的js文件-->
    <script src="../element-ui/lib/index.js"></script>
    <!--element的css文件-->
    <link rel="stylesheet" href="../element-ui/lib/theme-chalk/index.css">

    <style>
        .el-header {
            background-color: #B3C0D1;
            color: #333;
            line-height: 60px;
        }

        .el-aside {
            color: #333;
        }
    </style>
</head>
<body>
<div id="app">
    <!--左侧Container-->
    <el-container style="height: 500px; border: 1px solid #eee">
        <!--左侧-->
        <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
            <el-menu :default-openeds="['1', '3']">
                <el-submenu index="1">
                    <template slot="title"><i class="el-icon-message"></i>导航一</template>
                    <el-menu-item-group>
                        <template slot="title">分组一</template>
                        <el-menu-item index="1-1">选项1</el-menu-item>
                        <el-menu-item index="1-2">选项2</el-menu-item>
                    </el-menu-item-group>
                    <el-menu-item-group title="分组2">
                        <el-menu-item index="1-3">选项3</el-menu-item>
                    </el-menu-item-group>
                    <el-submenu index="1-4">
                        <template slot="title">选项4</template>
                        <el-menu-item index="1-4-1">选项4-1</el-menu-item>
                    </el-submenu>
                </el-submenu>
                <el-submenu index="2">
                    <template slot="title"><i class="el-icon-menu"></i>导航二</template>
                    <el-menu-item-group>
                        <template slot="title">分组一</template>
                        <el-menu-item index="2-1">选项1</el-menu-item>
                        <el-menu-item index="2-2">选项2</el-menu-item>
                    </el-menu-item-group>
                    <el-menu-item-group title="分组2">
                        <el-menu-item index="2-3">选项3</el-menu-item>
                    </el-menu-item-group>
                    <el-submenu index="2-4">
                        <template slot="title">选项4</template>
                        <el-menu-item index="2-4-1">选项4-1</el-menu-item>
                    </el-submenu>
                </el-submenu>
                <el-submenu index="3">
                    <template slot="title"><i class="el-icon-setting"></i>导航三</template>
                    <el-menu-item-group>
                        <template slot="title">分组一</template>
                        <el-menu-item index="3-1">选项1</el-menu-item>
                        <el-menu-item index="3-2">选项2</el-menu-item>
                    </el-menu-item-group>
                    <el-menu-item-group title="分组2">
                        <el-menu-item index="3-3">选项3</el-menu-item>
                    </el-menu-item-group>
                    <el-submenu index="3-4">
                        <template slot="title">选项4</template>
                        <el-menu-item index="3-4-1">选项4-1</el-menu-item>
                    </el-submenu>
                </el-submenu>
            </el-menu>
        </el-aside>

        <!--设置-->
        <el-container>
            <el-header style="text-align: right; font-size: 12px">
                <el-dropdown>
                    <i class="el-icon-setting" style="margin-right: 15px"></i>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item>查看</el-dropdown-item>
                        <el-dropdown-item>新增</el-dropdown-item>
                        <el-dropdown-item>删除</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
                <span>王小虎</span>
            </el-header>
            <!--表格-->
            <el-main>
                <el-table :data="tableData">
                    <el-table-column prop="date" label="日期" width="140">
                    </el-table-column>
                    <el-table-column prop="name" label="姓名" width="120">
                    </el-table-column>
                    <el-table-column prop="address" label="地址">
                    </el-table-column>
                </el-table>
            </el-main>
        </el-container>
    </el-container>
</div>
</body>
<script>
    /**
     * 1、引入Vue所需js库
     * 2、引入Element所需要的js和css文件
     * 3、创建一个id为app的div，代码写在该div中
     */
    new Vue({
        el: "#app",
        data() {
            const item = {
                date: '2016-05-02',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
            };
            return {
                tableData: Array(10).fill(item)
            }
        }
    });
</script>
</html>