Vue.js本身没有提供与服务端通信的借口，但是通过插件的形式实现了基于Ajax、Jsonp等技术的服务端通信。

ps：说明下，从vue2.x开始尤大大推荐使用axios进行数据交互，关于axios后续将继续和大家一起学习。

今天我们就一起学习一下vue-resource。

一、安装

npm install vue-resource --save
//然后在main.js（入口文件）中引入并注册
import Vue from 'vue';
import VueResource from 'vue-resource'
Vue.use(VueResource)

二、参数配置

vue-resource将请求配置分为全局配置、组件实例配置和调用配置这三部分。并且这三部分的优先级依次增高。

1. 全局配置

使用全局配置设置默认值。

Vue.http.options.root = '/root';

2.组件实例配置

在组件实例化的配置参数http选项中进行配置。

new Vue({
  http:{
      root: './root',
      headers{
        Authorization: 'Basic datura'
      }
  }
})

3.方法调用时配置

new Vue({
  methods：{
      getData(){
          this.$http.get({
              url: '/api',
              headers: {
                  Authorization: 'Basic datura'
              }
          }).then(function(res){
              //请求成功的回调
          },function(err){
               //请求失败的回调
          })
    }
  }
})

三、具体调用（请求数据）

1.方式一（底层式）

new Vue({
  methods：{
      getData(){
          //POST请求，带参数
          this.$http({
              url: '/api',
              method: 'POST',
              data:{
                  'username': 'datura_lj',
                  'password': 123456
              },
              headers: {
                  'Content-Type': 'x-wwww-form-urlencoded'
              }
          }).then(function(res){
              //请求成功的回调
          },function(err){
               //请求失败的回调
          })
    }
  }
})

2.方式二（便捷式）

不同于底层式方法，便捷式方法是其实是对底层方法进行了封装，它提供了7种请求API：

get(url, [options])

head(url, [options])

delete(url, [options])

jsonp(url, [options])

post(url, [body], [options])

put(url, [body], [options])

patch(url, [body], [options])

参数说明：

四、实战代码

// 基于全局Vue对象使用http 
Vue.http.get('/api', [options]).then(successCallback, errorCallback);
Vue.http.post('/api', [body], [options]).then(successCallback, errorCallback);

// 在一个Vue实例内使用$http 
this.$http.get('/api', [options]).then(successCallback, errorCallback);
this.$http.post('/api', [body], [options]).then(successCallback, errorCallback);

    methods:{
       get1:function(){
              //发送get请求
          this.$http.get('/api').then(function(res){
             //请求成功函数   
          },function(){
             //请求失败函数
          });
        },
        get2:function(){
             //发送get请求
           this.$http.get('get.do',
                {
                    a:1,
                    b:2
                }
                ).then(function(res){
                   //请求成功函数   
                   },function(){
                    //请求失败函数
                 });
          },
          post:function(){
                 //发送post请求
            this.$http.post('post.do',
                {
                    a:1,
                    b:2
                }
              ).then(function(res){
                    //请求成功函数 
              },function(){
                    //请求失败函数
              });
           }，
        put:function(){
            this.$http.put('put.do',{
                "id": 111,
                "hascollect": 1
            }).then(function(res){
           //请求成功函数
            }
          },function(err){
            //请求失败函数
          });
      }
  }