Vue的Axios异步通信

朱雀 2023-09-30 08:25 8阅读 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>
    
        <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>

###  ###