Vue实现让页面加载时请求后台接口数据

当Vue应用渲染完毕后，我们可以在mounted钩子函数中去请求后台接口数据。

以下是步骤：

1. 安装axios

首先，我们需要安装axios来进行请求后台接口数据。可以通过npm或yarn来进行安装。

npm install axios
// 或
yarn add axios

2. 导入axios

在Vue组件文件中导入axios库。

import axios from "axios"

3. 请求后台接口数据

在mounted生命周期中，使用axios请求后台接口数据。

mounted() {
  axios
    .get("https://my-api.com/data") // 配置您的API URL地址
    .then(response => {
      this.data = response.data
    })
    .catch(error => {
      console.log(error)
    })
}

在上面的示例中，我们向https://my-api.com/data发送了一个GET请求，获取到数据后将其存储在data属性中。

这个过程可能是异步的，所以我们需要在.then()和.catch()回调函数中处理结果或错误。

示例1：请求数据并显示在页面上

下面是一个完整Vue组件的示例代码，它从API获取数据并将其呈现在页面上：

<template>
  <div>
    <ul>
      <li v-for="(item, index) in data" :key="index">{{ item }}</li>
    </ul>
  </div>
</template>

<script>
import axios from "axios";

export default {
  data() {
    return {
      data: [],
    };
  },
  mounted() {
    axios
      .get("https://my-api.com/data")
      .then((response) => {
        this.data = response.data;
      })
      .catch((error) => {
        console.log(error);
      });
  },
};
</script>

使用v-for指令遍历data数组，并将每个项目呈现为li元素，从而显示在页面上。

示例2：根据获取到的数据判断显示不同的内容

如果我们需要根据获取到的数据进行一些逻辑处理，比如根据获取到的数据进行判断并显示不同的内容。

下面的示例中，当获取到的data数据为null或长度为0时，显示“数据为空”；否则，显示data数据中的所有Item。

<template>
  <div>
    <template v-if="!data || data.length === 0">
      <p>数据为空</p>
    </template>
    <template v-else>
      <ul>
        <li v-for="(item, index) in data" :key="index">{{ item }}</li>
      </ul>
    </template>
  </div>
</template>

<script>
import axios from "axios";

export default {
  data() {
    return {
      data: [],
    };
  },
  mounted() {
    axios
      .get("https://my-api.com/data")
      .then((response) => {
        this.data = response.data;
      })
      .catch((error) => {
        console.log(error);
      });
  },
};
</script>

在上面的示例中，我们使用了v-if和v-else模板，根据data数据是否为空进行不同的展示，从而满足不同的需求。

以上是在Vue中实现让页面加载时请求后台接口数据的完整攻略，希望对您有所帮助。