vue-Resource（与后端数据交互）

单来说，vue-resource就像jQuery里的$.ajax，用来和后端交互数据的。可以放在created或者ready里面运行来获取或者更新数据...

vue-resource文档：https://github.com/vuejs/vue-resource/blob/master/docs/http.md

结合vue-router

data(){

        return{

            toplist:[],

            alllist:[]

        }

    },

    //vue-router

    route:{

        data({to}){

            //并发请求，利用 Promise 

            return Promise.all([

                //简写

                this.$http.get('http://192.168.30.235:9999/rest/knowledge/list',{'websiteId':2,'pageSize':5,'pageNo':1,'isTop':1}),

                //this.$http.get('http://192.168.30.235:9999/rest/knowledge/list',{'websiteId':2,'pageSize':20,'pageNo':1,'isTop':0})

                //不简写

                this.$http({

                    method:'GET',

                    url:'http://192.168.30.235:9999/rest/knowledge/list',

                    data:{'websiteId':2,'pageSize':20,'pageNo':1,'isTop':0},

                    headers: {"X-Requested-With": "XMLHttpRequest"},

                    emulateJSON: true

                    })

                ]).then(function(data){//es5写法

                     return{

                        toplist:data[0].data.knowledgeList,

                        alllist:data[1].data.knowledgeList

                    }

                //es6写法 .then()部分

                //.then(([toplist,alllist])=>({toplist,alllist})) 

            },function(error){

                //error

            })

        }

    }


在其他地方使用

ready(){

        var that=this;

        var websiteid = 2,

            pagesize = 20,

            pageno =1; 

        that.$http({

            method:'GET',

            url:'http://192.168.30.235:9999/rest/knowledge/list',

            data:{'websiteId':websiteid,'pageSize':pagesize,'pageNo':pageno,'isTop':0}

        }).then(function(data){

            //赋值给alllist数组,

            that.$set('alllist',data.data.knowledgeList)

        })

        //简写

        /*that.$http.get('http://192.168.30.235:9999/knowledge/list',{'websiteId':2,'pageSize':20,'pageNo':1,'isTop':0}).then(function(response){

            that.$set('alllist',response.data.knowledgeList)

        })*/

    }


若定义全部变量（在data（）中定义），使用$get()获取


data(){

        return{

            toplist:[],

            alllist:[],

            websiteid:2,

            pagesize:20,

            pageno:1

        }

    },

ready(){

        var that=this;

        that.$http({

            method:'GET',

            url:'http://192.168.30.235:9999/rest/knowledge/list',

            //使用定义的全局变量 用$get()获取

            data:{'websiteId':that.$get('websiteid'),'pageSize':that.$get('pagesize'),'pageNo':that.$get('pageno'),'isTop':0}

        }).then(function(data){

            //赋值给alllist数组,

            that.$set('alllist',data.data.knowledgeList)

        },function(error){

           //error

         })

    }


将数据绑定到dom上


<ul>

    <li v-for="item in alllist" v-if="item.istop == false">

        <a v-link="{ name: 'getReceiptDetail',params:{knowledgeId: item.id }}">

            <div class='fl know-info'>

　　　　　　　　　　<!-- | limit 和 | timer是filter 在后续会说到-->

　　　　　　　　　　<!--字段含义: -->

                <p class='font-normal nomal-height'>{{item.title | limit 30 }}</p>                 

　　　　　　　　　 <p class='co9a9a9a' ><span style='margin-right: 1rem;'>{{item.viewTimes}}K</span><span>{{item.publishTime | timer }}</span></p> <!--viewTimes:有多少人查看 , publishTime:发布时间-->

            </div>

            <div class='fr know-img'>

                <img v-bind:src=item.coverImage />

            </div>

            <div class='clearfix'></div>

        </a>

   </li>

</ul>