axios是独立于vue的一个项目，基于promise用于浏览器和node.js的http客户端

• 在浏览器中可以帮助我们完成 ajax请求的发送
• 在node.js中可以向远程接口发送请求

1、获取数据

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

注意：测试时需要开启后端服务器，并且后端开启跨域访问权限

 

 

var app = new Vue({

  el: '#app',

  data: {

      memberList: []//数组

  },

  created() {

      this.getList()

  },


  methods: {


      getList(id) {

          //vm = this

          axios.get('http://localhost:8081/admin/ucenter/member')//服务器地址

          .then(response => {//response返回结果，可以任意定义 

console.log(response) this.memberList = response.data.data.items }) .catch(error => { console.log(error) }) } } })

控制台查看输出

 

3、显示数据

<div id="app">

  <table border="1">

      <tr>

          <td>id</td>

          <td>姓名</td>

      </tr>

      <tr v-for="item in memberList">

          <td>{{item.memberId}}</td>

          <td>{{item.nickname}}</td>

      </td>

  </tr>

</table>
</div>