vue插件vue-resource的使用笔记（小结）

vue插件vue-resource的使用笔记

什么是vue-resource

vue-resource是一个Vue.js的插件，它为我们提供了一个服务，用于在Vue.js应用程序中轻松地处理Web API请求和响应。它和jQuery的Ajax非常类似，不过它更适合Vue.js。

安装

npm install vue-resource --save

使用

在Vue组件中使用vue-resource，需要在初始化的时候注入它：

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

Vue.use(VueResource)

发送HTTP请求

发送 HTTP 请求是最常用的功能，可以使用下面的方法：

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

这是一段使用get方法请求数据，并在成功后打印响应数据的代码。

可以看到，我们不需要手动创建XMLHttpRequest对象，也不需要考虑浏览器兼容性的问题，直接使用高度封装了的get方法即可。

除了get方法以外，还有post、put、delete等方法可以使用。如：

this.$http.post(url, data).then(response => {
  console.log(response.data)
})

其中，data是请求数据，response是响应对象，response.data是响应的数据。

传递参数

在使用get方法时，还可以传递参数：

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

传递参数的方式是在第二个参数指定params对象，里面是参数的键值对。

在使用post等方法时，可以直接把参数放在第二个参数中：

this.$http.post(url, {name: 'vue', description: 'a progressive JavaScript framework'}).then(response => {
  console.log(response.data)
})

示例说明

下面是两个实际使用场景的示例：

示例1：获取列表数据并渲染列表

<template>
  <div>
    <table>
      <thead>
        <tr>
          <th>名称</th>
          <th>描述</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="item in list" :key="item.id">
          <td>{{ item.name }}</td>
          <td>{{ item.description }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: []
    }
  },
  created() {
    this.loadData()
  },
  methods: {
    loadData() {
      this.$http.get('/api/list').then(response => {
        this.list = response.data
      })
    }
  }
}
</script>

这个示例展示了如何通过vue-resource获取数据并渲染列表。

示例2：提交表单

<template>
  <form @submit.prevent="submitForm">
    <label>
      姓名：
      <input type="text" v-model="name">
    </label>
    <label>
      密码：
      <input type="password" v-model="password">
    </label>
    <button type="submit">提交</button>
  </form>
</template>

<script>
export default {
  data() {
    return {
      name: '',
      password: ''
    }
  },
  methods: {
    submitForm() {
      this.$http.post('/api/login', {name: this.name, password: this.password}).then(response => {
        alert('登录成功')
      })
    }
  }
}
</script>

这个示例展示了如何使用vue-resource提交表单数据。