vue-resource请求数据的使用方法

 

vue-resource：vue.js关于客户端请求数据的官方插件

使用vue-resource请求数据的步骤

  1:安装vue-resource插件,记得添加--save    若安装淘宝镜像用cnpm
  npm install vue-resource --save / cnpm

  2：main.js引入vue-resource
  import VueResource from 'vue-resource'
  
  3：
  Vue.use(VueResource)
  
  4：在组件中使用vue-resource
    var api='http://www.phonegap100.com/appapi.php?a=getPortalCate'
  this.$http.get(api).then(response => {

    // get body data
    this.someData = response.body;

  }, response => {
    // error callback
  });

//vue组件中请求数据的实例
<template>

       <ul>
                  <li v-for="(item,index) in list" :key="index">
                     {{item.catname}}
                 </li>
       </ul>      
</template>
<script>
export default {
    data(){
        return{
            list:[]
        }
    },
    methods: {
        getData(){
            var api='http://www.phonegap100.com/appapi.php?a=getPortalCate'
            this.$http.get(api).then((response)=>{
                /* es6中this就指向当前上下文 ，非es6语法中需要提前设置that=this*/
                console.log(response)
                this.list=response.body.result
            },(err)=>{
                console.log(err)
            })
        }
    }
}
</script>

上述代码的效果图如下

简单的总结了vue-resource的用法，各方大佬若有更好的例子，欢迎讨论！！！