VUE中使用Vue-resource完成交互

使用Vue-resource完成交互可以实现前端页面和后端服务器之间的数据交换和通信。下面是使用Vue-resource实现交互的完整攻略：

1. 安装Vue-resource

在使用Vue-resource前，首先要将其安装到Vue项目中，可以通过在命令行中执行以下命令进行安装：

npm install vue-resource --save

2. 引入Vue-resource

在Vue项目中使用Vue-resource需要先引入它，并且在Vue实例中进行注册。可以在main.js文件中添加以下代码：

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

Vue.use(VueResource)

3. 发送HTTP请求

在Vue-resource中，发送HTTP请求有四种方式：get、post、put和delete。我们可以在组件中通过Vue.http来调用这些方法。

下面以get方法为例，展示如何在Vue中使用Vue-resource发送HTTP请求：

this.$http.get('/api/data')
  .then(response => {
    console.log(response.body)
  }, error => {
    console.log(error.statusText)
  })

上面的代码发送了一个get请求到/api/data路由，成功时打印响应体，失败时打印错误信息。

4. 发送带参数的HTTP请求

在发送HTTP请求时，有时需要将一些参数带入请求中，Vue-resource提供了两种方式：使用params选项和手动拼接URL。

下面以使用params选项为例，展示如何在Vue-resource中发送带参数的HTTP请求：

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

上面的代码通过params选项将两个参数id和name传入请求中。

5. 发送HTTP Post请求

在Vue-resource中，使用post方法发送HTTP请求与使用get方法很相似，只是需要传递第二个参数来指定请求体。

下面以post方法为例，展示如何在Vue-resource中发送HTTP Post请求：

this.$http.post('/api/data', {
  id: 1,
  name: 'example'
})
.then(response => {
  console.log(response.body)
}, error => {
  console.log(error.statusText)
})

上面的代码发送了一个post请求到/api/data路由，并将带有两个参数的请求体传入，成功时打印响应体，失败时打印错误信息。

6. 发送FormData

如果需要上传文件或者提交表单数据，可以使用Vue-resource提供的FormData对象。

下面以使用post方法发送FormData为例，展示如何在Vue-resource中发送包含文件上传和表单数据的请求：

<template>
  <div>
    <input type="file" ref="fileInput">
    <button @click="uploadFile">Upload</button>
  </div>
</template>

<script>
export default {
  methods: {
    uploadFile () {
      const formData = new FormData()
      formData.append('file', this.$refs.fileInput.files[0])

      this.$http.post('/api/upload', formData)
        .then(response => {
          console.log(response.body)
        }, error => {
          console.log(error.statusText)
        })
    }
  }
}
</script>

上面的代码创建了一个包含文件上传和表单数据的请求，将文件通过FormData对象传递给post请求，并在成功时打印响应体，失败时打印错误信息。

以上就是使用Vue-resource完成交互的完整攻略。根据实际情况，可以选择不同的方法来发送HTTP请求和传递参数。