vue 之 安装请求数据的模板 ， vue-resource

.vue-resource请求数据的步骤如下‘
1.需要安装vue-resource模块，注意请加上 --save
国外： npm install vue-resource --save / 国内 ： cnpm install vue-resource --save

2.main.js 引入 vue-resource

import VueResource from 'vue-resource';

3.Vue.use(VueResource)
使用例子显示

<div>
       <button @click="getData()">请求数据</button>           //   例1显示
       <hr>
       <br>
       <ul>                                                                    //   例2显示
           <li v-for="item in list" :key="item.id" > 
               {{item.title}}
           </li>
       </ul>
    </div>

4.在组件里面直接使用：例子1.

     getData(){
                 var api='http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=1'
                 this.$http.get(api).then(function(response){
                     console.log(response)
                 },function(err){
                     console.log(err)
                 })
             }

4.在组件里面直接使用：例子2：箭头函数 =>

    getData(){
         var api='http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=1'
         
         this.$http.get(api).then((response)=>{
             console.log(response)
             //注意this指向
             this.list=response.body.result;
         },function(err){
             console.log(err)
         })
     },

** 如果想直接刷新显示 使用生命周期函数**

 /*生命周期函数*/
     mounted(){
         this.getData();

     },

显示