Vue学习笔记3、axios异步通信

类似于ajax的获取数据，并且渲染到前端页面上

数据：

{
    "stringVar": "a String variable",
    "intVar": 233,
    "url": "https://www.baidu.com",
    "booleanVar": true,
    "list": ["item1", "item2", "item3"],
    "objects": [
        {
            "name": "名称1",
            "value": 1111
        },
        {
            "name": "名称2",
            "value": 2222
        }
    ]
}

页面：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 解决加载时闪烁 */
        [v-cloak] {
            display: none;
        }
    </style>
</head>
<body>
    <!-- 解决加载时闪烁 -->
    <div v-cloak id="app">
        <p>{{info.stringVar}}</p>
        <p>{{info.intVar}}</p>
        <a v-bind:href="info.url">超链接</a>
        <p>{{info.booleanVar}}</p>
        <p>{{info.list}}</p>
        <li v-for="item in info.list">{{item}}</li>
        <br>
        <li v-for="item in info.objects">{{item.name}} {{item.value}}</li>
    </div>
    <script src="vue/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {},
            // 这一行以下是axios的内容
            // 下面是data方法，上面是data属性，不一样的
            data() {
                return{
                    // 请求返回的参数 必须和json字符串一样
                    info: {
                        stringVar: null,
                        intVar: 0,
                        url: "",
                        booleanVar: false,
                        list: [],
                        objects:{
                            name: "",
                            value: 0
                        }
                    }
                }
            },
            mounted() { // 钩子函数
                // 链式编程，ES6以上可用
                axios.get("data.json").then(response=>(this.info = response.data));
            }
        })
    </script>
</body>
</html>

dzydzy7

发布了41 篇原创文章 · 获赞 2 · 访问量 1万+

私信关注

Vue学习笔记3、axios异步通信

猜你喜欢