[vue]axios异步通信

Posted pinked

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了[vue]axios异步通信相关的知识,希望对你有一定的参考价值。

axios异步通信

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--解决解析时出现闪烁的问题-->
    <style>
        [v-block] {
            display: none;
        }
    </style>
</head>
<body>
<div id="app" v-block>
    <div>{{info.name}}</div>

    <div>
        <p>家庭成员:</p>
        <ul>
            <li>{{info.family.father}}</li>
            <li>{{info.family.mother}}</li>
            <li>{{info.family.sister}}</li>
        </ul>
    </div>

    <div>
        <p>友情链接:</p>
        <li v-for="(item,name) in info.links" :key='name'>
            <a v-bind:href="item.url">
                {{item.name}}
            </a>
        </li>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios@0.19.2/dist/axios.min.js"></script>
<script>
    var vm = new Vue({
            el: "#app",
            //这里的data是一个方法,之前的data为Vue中的属性
            data() {
                return {
                    info: {
                        name: null,
                        //对象
                        family: {
                            father: null,
                            mother: null,
                            sister: null
                        },
                        // 数组
                        links: [
                            {name: null, url: null},
                            {name: null, url: null},
                            {name: null, url: null}
                        ],
                    }
                }
            },
        //钩子函数
            mounted() {
                axios.get('../data.json').then(Response => (this.info = Response.data));
            }
        })
    ;
</script>
</body>

以上是关于[vue]axios异步通信的主要内容,如果未能解决你的问题,请参考以下文章

解决vue跨域axios异步通信

Vue:Axios异步通信计算属性内容分发自定义事件

VueVue入门--双向绑定,Vue的组件,Axios异步通信,计算属性,插值,自定义事件

VueVue入门--双向绑定,Vue的组件,Axios异步通信,计算属性,插值,自定义事件

vue 笔记axios异步通信

Vue--Axios异步通信 & v-cloak解决闪烁问题 & 生命周期