3.axios异步通信

1.模拟后台的json数据

{
  "name": "小吴",
  "url": "https://www.baidu.com",
  "page": 1,
  "address": {
    "street": "fubuhe",
    "city": "长沙"
  },
  "links": [
    {
      "name": "百度",
      "url": "https://baidu.com"
    },
    {
      "name": "bilibili",
      "url": "https://www.bilibili.com"
    }
  ]
}

2.html里的操作，显示数据

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!-- 解决显示模板的问题-->
    <style>
        [v-clock]{
            display: none;
        }
    </style>
</head>
<body>
<!--view层-->
<div id="vue" v-clock>
    {{info.name}}----{{info.address.city}}---{{info.links[1].name}}}
    <a v-bind:href="info.url">百度</a>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script type="text/javascript">
    var vm = new Vue({
        el: '#vue',
        data() {//接受mounted里的数据的方法
            return {
                //请求的返回参数格式必须和json字符串一致
                info: {
                    name: null,
                    url: null,
                    address: {
                        street: null,
                        city: null
                    },
                    links: [{
                            name: null,
                            url: null
                        }
                    ]
                }
            }
        },
        mounted() {//钩子函数
            axios.get('data.json').then(response => (this.info = response.data));
        }
    });
</script>
</body>
</html>

 

posted @ 2021-06-29 21:47  一拳超人的逆袭  阅读(39)  评论(0)    收藏  举报