Vue2学习笔记之请求数据交互vue-resource

下面是关于“Vue2学习笔记之请求数据交互vue-resource”的完整攻略：

1. 什么是vue-resource

vue-resource 是一个基于 Vue.js 的网络请求库，它提供了一组网络请求、数据处理的功能，让我们可以轻松地进行数据交互。

2. 安装vue-resource

在使用之前，我们需要先安装 vue-resource 依赖：

npm install vue-resource@2.0.0-rc.2 --save

3. 引入vue-resource

在我们的工程中，我们需要在 main.js 中引入 vue-resource：

import Vue from 'vue';
import VueResource from 'vue-resource';

Vue.use(VueResource);

4. 发送get请求

4.1 基本使用

VueResource 提供了一个简单易用的 http 客户端，通过调用它的 $http 方法，我们可以轻松地发送网络请求。

在下面的示例中，我们将向一个 API 发送一个 GET 请求，并将响应数据渲染到视图上：

<template>
  <div>
    {{ message }}
  </div>
</template>

<script>
export default {
  data () {
    return {
      message: ''
    }
  },
  created () {
    this.$http.get('/api/data').then(response => {
      this.message = response.body.message;
    }, error => {
      console.log(error);
    });
  }
}
</script>

4.2 带参数请求

使用 VueResource，我们可以很方便地传递参数到服务器端。

this.$http.get('/api/data', {
  params: {
    id: 1
  }
}).then(response => {
  console.log(response);
}, error => {
  console.log(error);
});

5. 发送post请求

5.1 基本使用

VueResource 可以很方便的发送 POST 请求：

this.$http.post('/api/data', {
  name: 'John Doe',
  age: 30
}).then(response => {
  console.log(response);
}, error => {
  console.log(error);
});

5.2 带表单数据请求

如果我们需要发送表单数据，我们需要将 Content-Type 头设置为 application/x-www-form-urlencoded：

this.$http.post('/api/data', {
  name: 'John Doe',
  age: 30
}, {
  headers: {
    'Content-Type': 'application/x-www-form-urlencoded'
  }
}).then(response => {
  console.log(response);
}, error => {
  console.log(error);
});