vue练习demo7-axios

最新推荐文章于 2024-07-03 23:36:40 发布

原创最新推荐文章于 2024-07-03 23:36:40 发布 · 229 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #elementui

vue 专栏收录该内容

27 篇文章

订阅专栏

这是一个关于如何利用Vue.js和Axios库从本地JSON文件获取并显示数据的示例。在页面加载时，Vue实例会在挂载阶段通过Axios发送GET请求到'../data/data.json'，并将返回的数据绑定到Vue实例的data属性上，从而实现在页面上展示JSON数据。

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

<!--    <style>-->
<!--        [v-cloak] {-->
<!--            display: none;-->
<!--        }-->
<!--    </style>-->

<!--    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>-->
    <script src="../js/vue.min.js"></script>
<!--    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>-->
    <script src="../js/axios.min.js"></script>
</head>
<body>
    <!-- view -->
    <div id="vue">
        <div>{{info.name}}</div>
        <div>{{info.address.city}}</div>
        <a v-bind:href="info.links[0].url">点我</a>
    </div>

    <script>
        var vm = new Vue({
            el: '#vue',
            data(){
                return {
                    info: {
                        name: null,
                        address: {
                            city: null
                        },
                        links: [
                            {
                                name: null,
                                url: null
                            }
                        ]
                    }
                }
            },
            // 钩子函数，链式编程 ES6新特性
            mounted() {
                axios.get('../data/data.json').then(response=>this.info=response.data);
            }
        })
    </script>
</body>
</html>