Vue的Axios异步通信

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


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>

    <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/[email protected]/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>

你可能感兴趣的:(vue,java,spring,spring,boot)