Vue 请求数据（axios）

Vue axios请求数据与vue-resource请求数据有所不同

步骤如下：

1.安装 npm install axios --save / npm install --save axios

2、哪里用哪里引入axios (与vue-resource有所不同,vue_resource在main.js 中引入便可以全局使用)

<template>
    <!-- 所有的内容要被根节点包含起来 -->
    <div id="home">首页组件
        <button @click="getData()">请求数据</button>
        <hr>
        <br>
        <ul>
            <li v-for="item in list">
                                        <!--将数据循环输出-->
                {{item.title}}
            </li>
        </ul>
    </div>

</template>

<script>

/*

请求数据的模板

    axios的使用
    
    1、安装 cnpm install axios --save

    2、哪里用哪里引入axios (与vue-resource有所不同)


*/
   
import Axios from 'axios';
export default{
    data(){
        return {

            msg:'我是一个首页组件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;    //用list接收这个数据
            }).catch((error)=>{          //接收错误
                console.log(error);
            })            
            
        }
    },
    mounted(){  /*生命周期函数*/

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

    }
    
}
</script>

<style>
    
</style>

运行结果：

以上就是axios请求数据，若有任何疑问或是不解，请在下方评论，谢谢。