vue-resource 与 axios 在架手架Vue-cli下使用

vue-resource （官方）使用<推荐使用>

步骤如下：

1、安装cnpm install vue-resource --save 或者npm install vue-resource --save

2、引入，在main.js引入，代码如下：

import VueResource from 'vue-resource'

Vue.use(VueResource);

import Vue from 'vue'
import App from './App.vue'
import VueResource from 'vue-resource'
Vue.use(VueResource);

new Vue({
  el: '#app',
  render: h => h(App)
})

3、使用，使用的话可以在框架任何地方使用，如下：

getData2(){
        var api='http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=1';
           this.$http.get(api).then(response => {
           console.log(response);
            this.list2=response.data.result;
         }, response => {

            });
        }

参考地址：https://github.com/pagekit/vue-resource/

 

--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

axios的使用:https://github.com/axios/axios（第三方）

1、安装 

npm install axios 或者 cnpm install axios

2、引入；在什么地方使用就必须在什么地方引用

import Axios from 'axios';

3、使用代码如下：

getData(){
        var api='http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=1';
            Axios.get(api).then((res)=>{
                console.log(res);
                this.list=res.data.result;

            }).catch((error)=>{
               console.log(error);
            })
        }

个人建议使用vue-resource 毕竟官方，以前看帖说不更新了，但是发现最近还在更新。

最终整体使用代码如下：

<template>
<div>
 <h1>这是一个组件</h1>
<button @click="getData()">获取数据</button>
<ul v-for="(item,key) in list">
    <li>
   {{item.title}}
    </li>
</ul>
<button @click="getData2()">获取数据2</button>
<ul v-for="(item,key) in list2">
    <li>{{item.title}}</li>
</ul>
</div>
    
</template>
<script>
import Axios from 'axios';
export  default {
    name:'home',
    data(){
        return {
            list:[]
            ,list2:[]

        }
    },methods:{
        getData(){
        var api='http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=1';
            Axios.get(api).then((res)=>{
                console.log(res);
                this.list=res.data.result;

            }).catch((error)=>{
               console.log(error);
            })
        }
        ,mounted(){
           
        },
    getData2(){
        var api='http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=1';
           this.$http.get(api).then(response => {
           console.log(response);
            this.list2=response.data.result;
         }, response => {

            });
        }

    }


 }
</script>