vue3访问apl接口获取json数据

在 Vue3 中，要访问 API 接口并获取 JSON 数据，通常你会用到 Axios 或者 Vue 的内置 `fetch` 函数来进行网络请求。以下是使用 Axios 的示例：

首先，在你的项目中安装 Axios，可以使用 npm 或 yarn 安装：

npm install axios
# 或者
yarn add axios

然后，在组件内创建一个 data 对象，并添加一个 methods 属性来定义一个获取数据的方法：

<template>
  <div id="app">
    <ul v-for="(item, index) in items" :key="index">
      {{ item.name }}
    </ul>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      items: []
    };
  },
  mounted() {
    this.fetchData();
  },
  methods: {
    fetchData() {
      axios.get('https://api.example.com/data') // 替换为你实际的API地址
        .then(response => {
          this.items = response.data; // 将接收到的数据赋值给 items
        })
        .catch(error => {
          console.error('Error fetching data:', error);
        });
    }
  }
};
</script>

在这个例子中，当组件挂载后，会调用 `fetchData` 方法从指定的 URL 获取数据。如果请求成功，响应数据会被解析成 JSON 并填充到 `items` 数组中。