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

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

步驟以下：

一、安裝cnpm install vue-resource --save 或者npm install vue-resource --save

二、引入，在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)
})

三、使用，使用的話能夠在框架任何地方使用，以下：

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（第三方）

一、安裝 

npm install axios 或者 cnpm install axios

二、引入；在什麼地方使用就必須在什麼地方引用

import Axios from 'axios';

三、使用代碼以下：

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>