vue+Axios

1.可以构造一个参数来装获得的后端数据

2.生命周期

测试代码：

1.json文件：

{
  "name":"java",
  "url": "http://baidu.com",
  "page": "1",
  "isNonProfit":"true",
  "address": {
    "street": "含光门",
    "city":"陕西西安",
    "country": "中国"
  },
  "links": [
    {
      "name": "B站",
      "url": "https://www.bilibili.com/"
    },
    {
      "name": "4399",
      "url": "https://www.4399.com/"
    },
    {
      "name": "百度",
      "url": "https://www.baidu.com/"
    }
  ]
}
2.前端代码文件：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    名字：<div>{{info.name}}</div><br>
    链接：<a :href="info.url">url</a><br>
    页数：<div>{{info.page}}</div><br>
    地址：<div>{{info.address.city}}</div><br>
<!--    info.links不要忘记-->
    链接表：<li v-for="link in info.links">
    名字：{{link.name}}<br>
    url:<a :href="link.url">{{link.url}}</a>
</li>
</div>
</body>
<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>
    var mv=new Vue({
        el:"#app",
        data:{
            info:null
        },
        // data(){
        //     return{
        //         info:null
        //     }
        //
        // },
        //this别忘了
        mounted(){
            axios.get('test.json').then(response =>(this.info=response.data))
        }
    });
</script>
</html>
测试结果：

 

 

 
posted @ 2022-07-07 09:30  zcz666  阅读(25)  评论(0)    收藏  举报