Vue基础之vue-resource,axios请求数据

1.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';
	Vue.use(VueResource);
	3.组件直接使用
	this.$http.get(地址).then((response)=>{
			console.log(response);
		 },function(error){
               console.log(error);
           })

<template>
 <div id="home">
	首页组件
	<button @click="getData()">获取数据</button>
      <ul>
	        <li v-for="item in list">
	          {{ item.title }}
	        </li>
      </ul>
    </div>
</template>
<script>
export default {
          name: "Home.vue",
          data(){
            return{
              list:[]
            }
          },
          methods:{
         	 getData(){
         		 /*vue-resouece请求数据*/
               var api = 'http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=1';
               this.$http.get(api).then((response)=>{
                 console.log(response);
                 this.list = response.body.result;
               },function(err){
                   console.log(err);
              		 })
               })
            }
           

2.axios请求数据

axios的使用
  *   1.安装axious--- cnpm install axios --save
  *   2.哪里用哪里引入
  *	   import Axios from 'axios';
  *	  3.使用
  *	  Axios.get(地址).then((response)=>{
              console.log(response);
          }).catch((error)=>{
              console.log(error);
          })

<template>
 <div id="home">
	首页组件
	<button @click="getData()">获取数据</button>
      <ul>
	        <li v-for="item in list">
	          {{ item.title }}
	        </li>
      </ul>
    </div>
</template>
<script>
import Axios from 'axios';
export default {
          name: "Home.vue",
          data(){
            return{
              list:[]
            }
          },
          methods:{
           getData(){
         	 /*axios请求数据*/
             var api = 'http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=1';
              Axios.get(api).then((response)=>{
                  console.log(response);
                  this.list = response.data.result;
              	}).catch((error)=>{
                  console.log(error);
             	 })
               })
            }

结果