简单的vue-resourse获取json并应用到模板示例

下面我为您讲解如何使用vue-resource获取JSON并应用到模板中。

1. 安装vue-resource

在开始之前，首先需要安装vue-resource。可以通过以下命令在命令行中安装：

npm install vue-resource --save

2. 引入vue-resource

安装完成后，需要在Vue项目中引入vue-resource。可以在Vue的入口文件中添加以下代码：

import VueResource from 'vue-resource'

Vue.use(VueResource)

3. 发送HTTP请求并处理响应

使用vue-resource发送HTTP请求是非常方便的。可以使用this.$http对象来发送请求。例如，可以在Vue实例的mounted生命周期钩子中发送请求，并将响应存储在data中，如下所示：

<template>
  <div>
    <ul>
      <li v-for="item in items">{{ item.title }}</li>
    </ul>
  </div>
</template>

<script>
  import axios from 'axios'

  export default {
    data() {
      return {
        items: []
      }
    },
    mounted() {
      this.$http.get('https://jsonplaceholder.typicode.com/posts')
        .then(response => {
          this.items = response.body
        })
    }
  }
</script>

上述示例中，向https://jsonplaceholder.typicode.com/posts发送GET请求，并将响应存储在items数组中。在模板中使用v-for指令，将数组中的每个元素都渲染到li元素中。

4. 发送带参数的HTTP请求

如果需要发送带参数的HTTP请求，可以简单地将参数对象作为第二个参数传递给this.$http.get方法。示例如下：

this.$http.get('https://jsonplaceholder.typicode.com/posts', {
  params: {
    userId: 1
  }
}).then(response => {
  this.items = response.body
})

上述示例中，发送了一个GET请求到https://jsonplaceholder.typicode.com/posts?userId=1。在params对象中定义了一个名为userId的键值对。该键值对会被转化为查询字符串附加到URL中发送。

总结

上述就是使用vue-resource获取JSON并应用到模板中的完整攻略。希望对您有帮助。