Vue使用vue-resouce和axios分别获取端口数据的

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

1.需要安装vue-resouce模块

npm install vue-resouce --save /cpnm insatall vue-resouce --save（快速安装）

安装后你的jar包依赖会出现在package.json文件下的"dependencies": {  }模块下

  "dependencies": {
    "vue": "^2.5.2",
    "vue-resource": "^1.5.1",
    "vue-router": "^3.0.1"
  },

2.main.js引入vue-resouce

import VueResouce from 'vue-resouce';

3.Vue.use(vueResouce);

4.在组件里面直接使用

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

<template>

    <div>

        <h2>这是一个首页组件</h2>

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

        <ul>
            <li v-for="item in list" >
                {{item}}
            </li>
        </ul>

    </div>
</template>

<script>
    export default {
    
        data(){
            return{
                msg:"我是一个首页组件",
                list:[],
            }
        },methods:{
            getData(){

                //请求数据
                var api="http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=1";

                 this.$http.get(api).then(function(resopnse){
                    console.log(resopnse);
                    console.log(resopnse.body.result);
                    this.list=resopnse.body.result;
                },function(err){
                    console.log(err);
                })

            }

        },components:{

        }

    }
</script>

<style lang="css" scoped>
   /*css 局部作用域 scoped*/ 
</style>

 使用axios请求数据的步骤

1.安装axios

npm install axios --save / cnpm install axios --save

2.在使用的模块下引入axios

import Axios from "axios";

3.在组件里使用

export default {
    
        data(){
            return{
                msg:"我是一个首页组件",
                list:[],
            }
        },methods:{

            getData(){

                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)=>{
                    consloe.log(error);
                });

            }

}