使用Vue调取接口,并渲染数据的示例代码

下面是使用Vue调取接口并渲染数据的完整攻略。

一、准备工作

在开始之前，需要确保您已经装好了Node.js和Vue-cli。如果还没有安装，可以前往官网进行下载和安装。

二、创建Vue项目

在命令行中输入以下命令创建Vue项目：

vue create my-project

这里创建的项目名为my-project。在创建项目的过程中，可以选择使用default(默认)或者手动选择自己需要的组件、插件等。创建成功后，进入项目并启动本地服务器，输入以下命令：

cd my-project
npm run serve

这样一个Vue项目已经准备好了，并且已经可以在本地服务器上运行了。现在可以开始接下来的步骤。

三、将api接口的数据渲染到网页上

1. 利用axios调取api接口

在Vue组件中引入axios，并调用该库来调取api接口。下面是一个示例代码：

<template>
  <div>
    <h2>{{ title }}</h2>
    <ul>
      <li v-for="item in list" :key="item.id">{{ item.name }}</li>
    </ul>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  data () {
    return {
      title: '用户列表',
      list: []
    }
  },
  created () {
    axios.get('https://jsonplaceholder.typicode.com/users').then(res => {
      this.list = res.data
    })
  }
}
</script>

以上代码定义了一个Vue组件，该组件的模板中有一个标题和一个ul元素。在该组件的属性区中，使用了data函数创建了一个数据对象，包含了标题和空数组list。在created生命周期函数中，使用了axios发起get请求来调取一个示例api接口，并在成功响应时将返回的用户数据赋值给list数组。在模板中，使用v-for指令来循环渲染list数组中的每一个用户项。

2. 利用fetch调取api接口

另一个常用的调取api接口的库是fetch。在Vue组件中使用fetch同样可以很方便地调取api接口。下面是一个示例代码：

<template>
  <div>
    <h2>{{ title }}</h2>
    <ul>
      <li v-for="item in list" :key="item.id">{{ item.name }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data () {
    return {
      title: '用户列表',
      list: []
    }
  },
  created () {
    fetch('https://jsonplaceholder.typicode.com/users')
      .then(res => res.json())
      .then(data => {
        this.list = data
      })
      .catch(error => console.error(error))
  }
}
</script>

以上代码与之前的代码很相似，只是将axios换成了fetch，同时将返回的数据使用res.json()方法进行解析，并在成功响应时将用户数据赋值给list数组。在模板中，同样使用了v-for指令来循环渲染list数组中的每一个用户项。

以上两个例子都是示例数据，可以根据实际情况修改url和需要渲染的页面元素，以及调用api接口的方法和参数。由于是异步操作，需要注意异步操作的问题，例如可以在数据没有加载完全时给用户显示一个loading的提示信息，防止用户看到空的页面。

综上所述，以上就是使用Vue调取api接口并渲染数据的方法以及两个示例代码。