vue获取json格式的数据

在Vue中获取JSON格式的数据可以使用Axios库，Axios是一个基于Promise的HTTP客户端，可以用于浏览器和Node.js。以下是使用Axios获取JSON格式数据的示例：

1. 安装Axios

可以使用npm或yarn安装Axios：

npm install axios --save

2. 在Vue组件中使用Axios

在Vue组件中，可以使用mounted钩子函数来获取数据。在mounted中使用Axios发送一个GET请求来获取数据：

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

<script>
import axios from 'axios';

export default {
  data() {
    return {
      items: []
    };
  },
  mounted() {
    axios.get('/api/items').then(response => {
      this.items = response.data;
    });
  }
};
</script>

在上面的代码中，我们在mounted钩子函数中使用Axios发送一个GET请求来获取数据，并将返回的数据赋值给组件的items属性。

3. 在服务器上提供JSON格式数据

在上面的代码中，我们假设服务器上有一个/api/items接口，用于提供JSON格式的数据。例如，我们可以使用Express框架在Node.js中提供数据：

const express = require('express');
const app = express();

app.get('/api/items', (req, res) => {
  const items = [
    { id: 1, name: 'Item 1' },
    { id: 2, name: 'Item 2' },
    { id: 3, name: 'Item 3' }
  ];

  res.json(items);
});

app.listen(3000, () => {
  console.log('Server started on port 3000');
});

在上面的代码中，我们使用Express框架在Node.js中提供/api/items接口，用于提供JSON格式的数据。当我们使用Axios发送一个GET请求到这个接口时，服务器将返回JSON格式的数据。