vue3.x axios使用

Posted 2021-06-21 天行子

 

安装axios

npm install axios --save-dev

App.vue

<template>
    <div id="app">
        <Example></Example>
    </div>
</template>

<script>

    import Example from \'./components/Example\'
    export default {
        name: \'App\',
        components:{
            Example
        }
    }
</script>

<style scoped>
</style>

Example.vue

<template>
    <div id="example">
        <button @click="getData">获取数据</button>
        <ul>
            <li v-for="data in dataList" :key="data.id">
                <h3>{{data.login}}</h3>
                <img :src="data.avatar_url" />
            </li>
        </ul>
    </div>
</template>
<script>
    import axios from \'axios\';
    export default {
        name: "Example",
        data:function(){
            return {
                dataList:[]
            }
        },
        methods:{
            getData:function () {
                axios.get(\'https://api.github.com/users\')
                    .then(res=>{
                        this.dataList = res.data;
                    })
                    .catch(err=>{
                        console.log(err);
                    })
            }
        }
    };
</script>
<style scoped>
    #example{
        text-align: center;
    }
    #example p{
        text-align: center;
        color:#fff;
        background-color: #0c63e4;
    }
    #example ul {
        list-style: none;
    }
    #example ul li {
        width: 50%;
        margin: 0 auto;
        background-color: #ccc;
    }
    #example li img{
        width:100px;
        height: 100px;
    }
</style>

浏览器点击 获取数据 按钮