Vue的Axios异步通信 朱雀 2023-09-30 08:25 1阅读 0赞 ### Axios异步通信 ### > 官方文档：https://axios-http.com/zh/docs/intro > > github地址：https://github.com/axios/axios > > CDN: Json数据 { "name": "lzj", "url": "https://blog. kuangstudy.com" , "page ": 1, "isNonprofit": true, "address": { "street": "含光门", "city": "陕西西安", "country": "中国" }, "links": [ { "name": "bilibili", "url": "https:/ /space.bilibili. com/95256449" }, { "name": " lzj", "url": "https:/ /blog. kuangstudy.com" }, { "name":"百度", "url": "https:/ /www.baidu.com/" } ] } html进行读取JSON文件中的值 > //需要添加CDN <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!--v-clock:解决闪烁问题--> <style> [v-clock]{ display: none; } </style> </head> <body> <div id="vue"> <div>{ {info.name}}</div> <div>{ {info.address.street}}</div> <a v-bind:href="info.url">点我</a> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script> <script src="https://unpkg.com/axios/dist/axios.min.js"></script> <script> var vm=new Vue({ el:"#vue", data(){ return{ //请求的返回参数格式，必须和json字符串一样 info:{ name:null, address:{ street:null, city:null, country:null }, url:null } } }, mounted(){ //钩子函数 链式编程 axios.get('./data.json').then(response=>(this.info=response.data)); } }); </script> </body> </html> ### ###
还没有评论，来说两句吧...