vue使用json最简单的两种方式分享

下面是关于“vue使用json最简单的两种方式”的详细讲解攻略。

方式一：使用axios获取json数据

axios是一个基于Promise的HTTP客户端，用于快速、简便地发送HTTP请求。这里我们使用axios获取json数据。

首先，我们需要安装axios：

npm install axios --save

然后，在Vue组件中引入axios并发送ajax请求，如下所示：

<template>
  <div>
    <h1>使用axios获取json数据</h1>
    <p>姓名：{{ name }}</p>
    <p>年龄：{{ age }}</p>
    <p>性别：{{ sex }}</p>
  </div>
</template>

<script>
  import axios from 'axios'

  export default {
    data () {
      return {
        name: '',
        age: '',
        sex: ''
      }
    },
    mounted () {
      this.getData()
    },
    methods: {
      getData () {
        axios.get('/data.json').then((res) => {
          this.name = res.data.name
          this.age = res.data.age
          this.sex = res.data.sex
        })
      }
    }
  }
</script>

其中，get()方法用于发起get请求，then()方法用于指定请求成功后的回调函数。

注意：axios默认情况下并不会在浏览器中发送跨域请求，如果需要发送跨域请求，请参考axios官方文档配置跨域代理。

示例代码也可以在GitHub上找到。

方式二：使用require获取json数据

require是CommonJS规范用于引入模块的函数。在Vue组件中，我们可以使用require获取json数据。

示例代码如下：

<template>
  <div>
    <h1>使用require获取json数据</h1>
    <p>姓名：{{ name }}</p>
    <p>年龄：{{ age }}</p>
    <p>性别：{{ sex }}</p>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        name: '',
        age: '',
        sex: ''
      }
    },
    mounted () {
      this.getData()
    },
    methods: {
      getData () {
        const { name, age, sex } = require('./data.json')
        this.name = name
        this.age = age
        this.sex = sex
      }
    }
  }
</script>

其中，我们使用require获取data.json文件，并从返回的对象中取出我们需要的数据。

需要注意的是，在WebPack2之后的版本中，使用import 和 export可以轻松地从JSON文件中导入数据。所以，如果你使用的是WebPack2及以上版本，就可以直接使用import 和 export导入导出数据了。

示例代码也可以在GitHub上找到。

以上两种方式均可用于将JSON数据与Vue绑定。这两种方式各有优缺点，使用时应根据实际情况来选择。

希望这份攻略对你有所帮助！