1. elementui入门

上面学习vue 用于dom和vue数据之间的交互。 但是无法完成页面布局。 elementui可以帮你完成优美的网页布局。layui---每个组件都讲。---边使用边查官网。---table  page  form  按钮  菜单

elementui网址：Element - The world's most popular Vue UI framework

 上面有很多功能

如何使用elementui

下面来介绍一下怎样使用

(1)引入js以及css

    <!--引入vue的js-->
    <script type="text/javascript" src="js/vue.js"></script>
    <!--引入elementui的js前必须引入vue的js-->
    <script type="text/javascript" src="js/index.js"></script>
    <!--引入elemengtui的css样式-->
    <link type="text/css" rel="stylesheet" href="css/index.css"/>

(2)body中定义一个div

<div id="app">
        <!--:data 引入vue中的变量tableData 必须为数组类型-->
        <el-table
                :data="tableData"
                border
                style="width: 100%">
            <!--el-table-column:表格的列  prop:必须和tableData中的属性名对于 -->
            <el-table-column
                    prop="date"
                    label="出生日期"
                    >
            </el-table-column>
            <el-table-column
                    prop="name"
                    label="姓名"
                    >
            </el-table-column>
            <el-table-column
                    prop="address"
                    label="地址">
            </el-table-column>
        </el-table>
    </div>

(3)创建vue对象

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 弄'
                }]
            }
      })

4. elementui+axios后台获取数据

上面写的数据是一个死数据。现在需要从数据库中获取数据。必须axios异步请求。

（1）引入axios

<!--引入axios的js-->
    <script type="text/javascript" src="js/axios.min.js"></script>

(2) vue中created（）页面加载完毕后执行该函数

  created(){
            this.initTable();
        },

//分页查询student表
            initTable(){
                axios.post("http://localhost:8088/list/"+this.currentPage+"/" + this.pageSize,this.StudentVo).then(result=>{
                    console.log(result.data.data.records)
                    this.tableData =result.data.data.records;
                    this.total = result.data.data.total;
                })
            },