vue-resourse将json数据输出实例

下面是详细讲解“vue-resource将json数据输出实例”的完整攻略:

1. 什么是vue-resource

vue-resource是Vue.js官方提供的一个通信插件，它支持浏览器内置的XMLHttpRequest和JSONP，可以很方便地发起http请求并处理响应。

2. 安装vue-resource

可以使用npm命令安装vue-resource：

npm install vue-resource --save

在项目中引入vue-resource：

import Vue from 'vue'
import VueResource from 'vue-resource'
Vue.use(VueResource)

3. 使用vue-resource获取json数据

使用vue-resource获取json数据的步骤如下：

1. 在Vue实例中声明一个data属性，用于保存获取到的json数据。
2. 在Vue实例中的created生命周期钩子中，使用this.$http.get(url)方法发起http get请求。
3. 在http get请求成功后，将获取到的数据保存到data中。

下面是一个获取json数据的示例代码：

<template>
  <div>
    <h1>获取json数据示例</h1>
    <ul>
      <li v-for="item in items">{{ item.title }}</li>
    </ul>
  </div>
</template>

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

上面的示例中，使用了jsonplaceholder的api来获取json数据，然后将返回的数据保存到items变量中。在模板中使用v-for指令遍历items数组，将每个item的title属性渲染出来。

4. 使用vue-resource发送post请求

VueResource不仅支持get请求，也支持post请求。下面是一个使用vue-resource发送post请求的示例代码：

<template>
  <div>
    <h1>发送post请求示例</h1>
    <form @submit.prevent="submitForm">
      <div>
        <label for="username">用户名：</label>
        <input type="text" id="username" v-model="username">
      </div>
      <div>
        <label for="password">密码：</label>
        <input type="password" id="password" v-model="password">
      </div>
      <div>
        <button type="submit">登录</button>
      </div>
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: '',
      password: ''
    }
  },
  methods: {
    submitForm() {
      this.$http.post('https://jsonplaceholder.typicode.com/posts', {
        username: this.username,
        password: this.password
      })
        .then(response => {
          console.log(response.body)
        })
    }
  }
}
</script>

上面的示例中，定义了一个表单，当用户点击提交按钮时，会调用submitForm方法。在submitForm方法中，使用this.$http.post方法发送post请求，并将用户名和密码作为参数传递。当请求成功后，在控制台输出响应体中的数据。