当前位置： 首页>后端>正文

五、axios详解

后端2024-04-19 17:05:04

1、axios组件

Vue并不能直接支持ajax，所以通过组件来实现ajax异步请求。

最为推荐的组件就是 axios。

axios在线cnd

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

示例：

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--1、导入Vue.js-->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <!--2、导入axios-->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

    <style>
        /* 解决闪烁问题 */
        [v-clock]{
            display: none;
        }
    </style>

</head>
<body>

<div id="app" v-clock>
    <div>{{info.name}}</div>
    <a v-bind:href="info.url">点我</a>
</div>


<script>

    var vm = new Vue({
        el:"#app",
        data(){
            return{
                info:{
                    name: null,
                    url: null,
                    address: {
                        street: null,
                        city: null,
                        country: null
                    }
                }
            }
        },
        mounted(){
            axios.get("../data.json").then(response=>(this.info=response.data));
        }
    });

</script>

</body>
</html>

data.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/"
    }
  ]
}

结果：


五、axios详解,第1张

https://www.xamrdz.com/backend/3zk1922083.html

相关文章：