vue2.0：（七）、vue-resource

本篇文章开始前，先介绍下什么是vue-resource，并且现在还有一个axios。

　　Vue.js是数据驱动的，这使得我们并不需要直接操作DOM，如果我们不需要使用jQuery的DOM选择器，就没有必要引入jQuery。vue-resource是Vue.js的一款插件，它可以通过XMLHttpRequest或JSONP发起请求并处理响应。也就是说，$.ajax能做的事情，vue-resource插件一样也能做到，而且vue-resource的API更为简洁。

　　至于axios,vue更新到2.0之后，作者就宣告不再对vue-resource更新，而是推荐的axios,所以现在越来越多的人用axios。本文先用vue-resource做。运行成功后，会尝试使用axios。下面切入正题：

　　第一步：main.js :第一步两个点，一个导入一个使用。

vue2.0：（七）、vue-resource

代码：

import Vue from 'vue';
import App from './App';
import router from './router';
import VueResource from 'vue-resource';  <!----------
import 'common/style/total.less';

Vue.use(VueResource);

/*eslint-disable no-new*/
new Vue({
    router,
    el:'#app',
    render: h => h(App)
})

第二步：App.vue，我们现在先要取到我们所需要的数据。

vue2.0：（七）、vue-resource

代码：

<template>
    <div >
@import 'common/style/mixin';
#aaa
    .tab{
        display:flex;
        width:100%;
        height:40px;
        line-height:40px;
        .border-1px(rgba(7,17,27,0.1));
        .tab-item{
            flex:1;
            text-align: center;
            a{
                display:block;
                font-size:14px;
                color:#ccc;
                &.active {
                    color:rgb(240,20,20);
                }
            }
        }
    }
</style>

在这里，我们使用： this.$http.get('/api/seller').then() 从接口中取出数据并用console.log打印出来。

当然，有export就要有import。接收的话就在header组件里面写上import。如下图：

vue2.0：（七）、vue-resource

利用props去接收。这样在标签里面就能取到seller里面的东西了。

这就是最简单的v-resource的用法。