vue获取后台json字符串方式

获取后台 JSON 字符串的方式在 Vue.js 中有很多种方法，下面介绍两种常见的方法：

方法一 使用Vue.js内置的http模块 （已弃用）

在 Vue.js 中使用 http 模块可以直接获取后台的 JSON 字符串，示例代码如下：

<template>
  <div>
    <h2>{{title}}</h2>
    <ul>
      <li v-for="user in users">{{user.name}}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      title: '用户列表',
      users: []
    }
  },
  created() {
    this.$http.get('/api/users').then(res => {
      this.users = res.data
    })
  }
}
</script>

在这个示例中，我们在页面创建时就发送一个 GET 请求到 URL 为 /api/users 的后端服务，然后使用 res.data 来获取服务端返回的 JSON 字符串，并将其赋值给 users 数组，最终在页面中使用 v-for 指令遍历 users 数组并渲染到页面当中。

但是需要注意的是，Vue.js 已经不再推荐使用 http 模块，我们应该推荐使用更为简洁、强大的第二种方法。

方法二 使用axios

axios 是一款非常强大的 JavaScript HTTP 库，可以帮助我们轻松地完成所有的 HTTP 请求操作，示例代码如下：

<template>
  <div>
    <h2>{{title}}</h2>
    <ul>
      <li v-for="user in users">{{user.name}}</li>
    </ul>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  data() {
    return {
      title: '用户列表',
      users: []
    }
  },
  created() {
    axios.get('/api/users').then(res => {
      this.users = res.data
    })
  }
}
</script>

这个示例中，我们同样是在页面创建时发送一个 GET 请求到 URL 为 /api/users 的后端服务，然后使用 res.data 来获取服务端返回的 JSON 字符串，并将其赋值给 users 数组，最终在页面中使用 v-for 指令遍历 users 数组并渲染到页面当中。

需要注意的是，在使用 axios 发送请求时，我们需要先 import 导入 axios 库，然后才能使用其提供的各种方法，如 axios.get、axios.post 等等。