Vue 请求数据（vue-resource）

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

1. 需要安装vue-resource模块， 注意加上 --save
   npm install vue-resource --save / cnpm install vue-resource --save
   
   安装好之后，在package.json 中检查一下：
   
   看到vue-resource就可以了

2. 在main.js引入 vue-resource
   import VueResource from ‘vue-resource’;

   main.js

  // The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue';
import App from './App';

import Vuesource from 'vue-resource'

Vue.use(Vuesource);
/*使用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、main.js  Vue.use(VueResource);


4、在组件里面直接使用

  this.$http.get(地址).then(function(){

  })

*/


Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
el: '#app',
components: { App },
template: '<App/>'
})

3. 在main.js 中使用 Vue.use(VueResource);
   代码如上

4. 在组件里面直接使用（语法格式如下）
   this.$http.get(地址).then(function(){
   })
   这个是我自己定义的Home.vue 的代码

<template>
   <!-- 所有的内容要被根节点包含起来 -->
   <div id="home">
        首页组件


       <button @click="getData()">请求数据</button>

       <hr>
       <br>

       <ul>
           <li v-for="item in list">
                                       <!--将数据循环输出-->
               {{item.title}}
           </li>
       </ul>
   </div>

</template>

<script>

/*

请求数据的模板

   vue-resource  官方提供的 vue的一个插件


   axios


   fetch-jsonp
*/
  

export default{
   data(){
       return {

           msg:'我是一个首页组件msg',
           list:[]
       }
   },
   methods:{

       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;         //list接收数据

           },function(err){                             //接收错误
               	console.log(err);                   
           })

       }
   },
   mounted(){  /*生命周期函数*/

           this.getData();  //   当页面刷新时自动加载数据

   }
   
}
</script>

<style>

   
</style>

我是在根组件App.vue中引用的Home.vue ，这个是App.vue的代码：

<template>


 <div id="app"> 
   

    <v-home></v-home>
 
    
 </div>
</template>

<script>

import Home from './components/Home.vue';

export default {     
 data () { 
   return {
     
     msg:'你好vue'
   }
 },
 components:{   /*前面的组件名称不能和html标签一样*/
   'v-home':Home,       
 }
 
}
</script>

<style lang="scss">

</style>

运行的效果是这样的：

目录结构在第一步已给出，部分地方做出注解。若有任何疑问或是不解，请在下方评论，谢谢。