详解vue与后端数据交互(ajax)：vue-resource

下面是“详解vue与后端数据交互(ajax)：vue-resource”的完整攻略，包含以下几个部分：

1. 概述
2. 安装vue-resource
3. 使用示例1：GET请求
4. 使用示例2：POST请求
   5.参考链接

1. 概述

Vue.js是一款轻量级、高效的渐进式JavaScript框架，可以用于构建 Web 界面和单页应用程序。而vue-resource是Vue.js官方推荐的异步HTTP请求库，可以简化Vue.js与后端数据交互（ajax）的过程，通常用于发送HTTP请求、处理响应信息。在后端使用RESTful API风格开发时，使用vue-resource能让我们更高效地完成前后端数据的交互。

2. 安装vue-resource

使用npm安装vue-resource：

npm install vue-resource --save

在Vue.js中使用vue-resource需要先使用Vue.use()方法安装：

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

Vue.use(VueResource)

3. 使用示例1：GET请求

下面以获取后端API数据为例进行GET请求的示例。

// 在组件中发起GET请求
this.$http.get('/api/data').then(response => {
    console.log(response.body)
}).catch(error => {
    console.log(error)
})

这里使用this.$http.get()方法发起GET请求，接受一个参数——API接口地址。请求成功后，我们响应数据的内容可以使用response.body获取，同时可以处理错误信息。

4. 使用示例2：POST请求

下面以提交表单数据为例进行POST请求的示例。

// 表单提交方法
submitForm() {
    this.$http.post('/api/data/save', this.form).then(response => {
        console.log(response)
    }).catch(error => {
        console.log(error)
    })
}

这里使用this.$http.post()方法发起POST请求，接受两个参数——API接口地址和表单数据（this.form）。请求成功后，我们可以处理响应信息，同时也可以进行错误处理。

5. 参考链接

• vue-resource官方文档：https://github.com/pagekit/vue-resource/blob/develop/docs/http.md
• Vue.js官方文档：https://cn.vuejs.org/v2/guide/