在vue中用axios获取后端渲染到前端

在Vue中使用axios获取后端数据并渲染到前端页面，一般需要遵循以下步骤：

1. 安装axios

使用npm或yarn安装axios：

npm install axios

2. 引入axios

在需要发送请求的Vue组件中，引入axios：

import axios from 'axios'

3. 发送请求

使用axios发送请求，例如：

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

以上代码使用get方法发送请求，请求的URL为`/api/data`，请求成功的响应数据会打印到控制台中。

4. 渲染数据

在Vue组件中，可以使用响应式数据来渲染后端返回的数据。例如：

<template>
  <div>
    <p v-for="item in data">{{ item }}</p>
  </div>
</template>

<script>
  import axios from 'axios';

  export default {
    data() {
      return {
        data: []
      }
    },
    created() {
      axios.get('/api/data')
        .then((response) => {
          this.data = response.data;
        })
        .catch((error) => {
          console.log(error);
        });
    }
  }
</script>

以上代码中，通过在Vue组件的`data`选项中定义`data`属性，并将其初始化为空数组`[]`，然后在组件的`created`生命周期钩子中使用axios获取后端数据，并将响应数据赋值给`data`属性。最后，在模板中使用`v-for`指令渲染数据。

以上就是在Vue中使用axios获取后端数据并渲染到前端页面的基本流程，希望能对你有所帮助。