vueaxios获取数据列表

1. 安装 axios

可以使用 npm 安装 axios：

npm install axios --save

2. 发送请求

在 Vue 组件中，我们可以使用 axios 发送请求。在发送请求之前，需要先引入 axios：

import axios from 'axios';

然后，可以使用 axios 的 get() 方法来发送 GET 请求，如下所示：

axios.get('/api/list').then(response => {
  console.log(response.data);
}).catch(error => {
  console.log(error);
});

上面的代码中，我们调用了 axios 的 get() 方法，传入了请求的 URL，然后使用 then() 方法来处理响应。如果发生错误，可以使用 catch() 方法来处理。

3. 在组件中使用

在组件中，我们可以使用 created() 生命周期函数来发送请求，并将返回的数据保存在组件的 data 中。例如，我们可以创建一个 TodoList 组件来显示一个待办事项列表：

<template>
  <ul>
    <li v-for="todo in todos" :key="todo.id">{{ todo.title }}</li>
  </ul>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      todos: []
    };
  },

  created() {
    axios.get('/api/todos').then(response => {
      this.todos = response.data;
    }).catch(error => {
      console.log(error);
    });
  }
};
</script>

上面的代码中，我们在 created() 生命周期函数中发送了一个 GET 请求，获取待办事项列表。然后，我们将返回的数据保存在组件的 data 中，并使用 v-for 指令来渲染列表。