《Vue.js玩转本地JSON数据文件，玩转数据请求的魅力》

2023-07-02 14:09:18

踏入 Vue.js 数据请求之旅，释放数据潜能

在 Vue.js 的世界里，数据是生命线，驱动着应用的每一个方面。从本地 JSON 文件中请求数据，就像给我们的项目注入活力，让它变得丰富多彩。准备好了吗？让我们开启这段 Vue.js 数据请求之旅，释放数据潜能！

JSON，数据交换的万能钥匙

JSON，全称 JavaScript Object Notation，是一种轻量级的数据格式，专为数据存储和传输而生。它就像一个翻译器，将复杂的数据转换成易于理解和使用的形式。Vue.js 是 JSON 的忠实拥趸，提供强大的支持，让我们可以轻松地处理 JSON 数据。

JSON 文件：数据仓库的创建

首先，我们需要创建一个 JSON 文件，就像一个仓库，用来存储需要展示的数据。比如，我们可以创建一个名为 data.json 的文件，并填入以下内容：

{
  "users": [
    {
      "id": 1,
      "username": "tiger117",
      "mobile": "18616358651"
    },
    {
      "id": 2,
      "username": "xiaoming",
      "mobile": "18616358652"
    },
    {
      "id": 3,
      "username": "zhangsan",
      "mobile": "18616358653"
    }
  ]
}

Vue.js 出马，数据请求大作战

有了 JSON 文件，接下来就是使用 Vue.js 来请求数据了。Vue.js 内置了 axios 库，就像一把利剑，帮助我们轻松获取数据。首先，我们需要安装 axios 库：

npm install axios

安装完成后，我们可以在 Vue 组件中使用 axios。比如，创建一个名为 App.vue 的组件，并在其中加入以下代码：

<template>
  <div>
    <ul>
      <li v-for="user in users" :key="user.id">
        {{ user.username }}: {{ user.mobile }}
      </li>
    </ul>
  </div>
</template>

<script>
import axios from 'axios';

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