笔记大全

vuejs如何调用json

更新时间：2023-12-07

Vue.js 调用 JSON 简介

JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，它可以用于客户端和服务器之间的数据传输。Vue.js 是一款流行的前端框架，它支持使用 JSON 来渲染页面。在本文中，我们将介绍如何使用 Vue.js 调用 JSON。

使用 Axios 库调用 JSON 数据

在 Vue.js 中，我们通常使用 Axios 库来调用 JSON 数据。Axios 是一个基于 Promise 的 HTTP 客户端库，可以用于在浏览器和 Node.js 中发送 HTTP 请求。我们可以使用 Axios 发送 HTTP GET 请求来获取 JSON 数据。


<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Using Axios with Vue.js</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  </head>
  <body>
    <div id="app">
      <ul>
        <li v-for="item in items" :key="item.id">{{ item.name }} - {{ item.email }}</li>
      </ul>
    </div>

    <script>
      var app = new Vue({
        el: '#app',
        data: {
          items: []
        },
        mounted() {
          axios.get('https://jsonplaceholder.typicode.com/users').then(response => {
            this.items = response.data
          })
        }
      })
    </script>
  </body>
</html>

通过上面的代码，我们可以在 HTML 中使用 Axios 库来调用 JSON 数据。其中，我们使用了一个开放的 API（https://jsonplaceholder.typicode.com/users）来获取 JSON 数据，Vue.js 将数据渲染到 HTML 页面上。

使用 Vue-resource 库调用 JSON 数据

除了 Axios，Vue.js 还提供了另一个库——Vue-resource。Vue-resource 是一个基于 Vue.js 的 HTTP 客户端库，它提供了与 Axios 类似的功能，并支持 Promise 和拦截器等特性。下面是使用 Vue-resource 库调用 JSON 数据的示例。


<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Using Vue-resource with Vue.js</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue-resource@1.5.1/dist/vue-resource.min.js"></script>
  </head>
  <body>
    <div id="app">
      <ul>
        <li v-for="item in items" :key="item.id">{{ item.name }} - {{ item.email }}</li>
      </ul>
    </div>

    <script>
      Vue.use(VueResource);

      var app = new Vue({
        el: '#app',
        data: {
          items: []
        },
        mounted() {
          this.$http.get('https://jsonplaceholder.typicode.com/users').then(response => {
            this.items = response.data
          })
        }
      })
    </script>
  </body>
</html>

使用 Vue-resource 库调用 JSON 数据的方法与 Axios 类似，两者的主要不同在于 API 的使用方法和项目的需求。我们可以通过 Vue.use(VueResource) 来使用 Vue-resource 库，并使用 this.$http.get() 方法来调用 JSON 数据。

总结

在本文中，我们介绍了如何使用 Vue.js 调用 JSON 数据。我们探讨了使用 Axios 库和 Vue-resource 库的示例，并提供了代码和说明。通过这些示例，我们可以学习到如何使用 Vue.js 和相关库来渲染 JSON 数据，并了解到 Vue.js 的优点和适用场景。

c语言编程笔录