08 vue之Mock假数据

十、Mock假数据

假数据，提供假数据，可以让假数据不需要等待后端的接口，而直接进行下一步的开发，一个常用的工具：EasyMock

1、创建项目编辑数据

编辑数据

2、在Main.vue中添加表格

<!--************************************************************************-->
<!--当el-table元素中注入data对象数组后，在el-table-column中用prop属性来对应对象中的键名即可填入数据，
用label属性来定义表格的列名。可以使用width属性来定义列宽。-->
<el-table :data="users" style="width: 100%">
  <el-table-column prop="uid" label="用户ID" width="180"></el-table-column>
  <el-table-column prop="uname" label="姓名" width="180"></el-table-column>
  <el-table-column prop="age" label="年龄"></el-table-column>
</el-table>

代码来自于ElementUI

3、使用Axios异步请求

注意：在发送axios请求时，如何调用到当前Vue对象中的内容？

因为axios内部的then内是当前axios对象，而不是当前vue对象，因此把当前vue对象用vm来指明。这样this就不会冲突

<script>
  export default {
    name: "Main",
    props:['username'],
    data(){
      return{
        users:[]
      }
    },
    created() {
      var vm = this;//注意点
      this.axios({
        method:'get',
        url:'https://mock.mengxuegu.com/mock/605e8da2f2e38f3a2f6b9a41/users/users'//把mock数据的接口地址复制过来
      }).then(function (response) {
         vm.users = response.data.users;
      });
    }
  }
</script>

测试成功