vue中Axios的使用

最新推荐文章于 2024-04-13 06:47:50 发布

年轻的猴

最新推荐文章于 2024-04-13 06:47:50 发布

阅读量107

点赞数

文章标签： vue

本文链接：https://blog.csdn.net/qq_42388853/article/details/109401309

版权

Axios的使用，需要一个data.json来读取，这里我看的是狂神的视频所以使用狂神一开始就准备好的json：

{
  "name": "狂神说Java",
  "url": "https://blog.kuangstudy.com",
  "page": 1,
  "isNonProfit": true,
  "address": {
    "street": "含光门",
    "city": "陕西西安",
    "country": "中国"
  },
  "links": [
    {
      "name": "bilibili",
      "url": "https://space.bilibili.com/95256449"
    },
    {
      "name": "狂神说Java",
      "url": "https://blog.kuangstudy.com"
    },
    {
      "name": "百度",
      "url": "https://www.baidu.com/"
    }
  ]
}

而后就是使用钩子函数mounted进行绑定，注意治理的get里面的json必须和你写的html文件在同级目录下，接着在then里把我们的响应的info绑定上data，剩下的就和以前的一样了

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        [v-cloak]{
            display: none;
        }
    </style>
</head>
<body>
<div id="app" v-cloak>
    <div>地名：{{info.address.street}}</div>
</div>






<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
    var vm =new Vue({
        el:'#app',
        data(){
            return{
                info:{
                    name:null,
                    address:{
                       street:null,
                       country:null
                    }
                }
            }

        },
        // 钩子函数
        mounted(){
            axios.get('data.json')
            .then(response=>(this.info=response.data));

        }

    });

</script>
</body>
</html>

年轻的猴

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue中Axios的使用

Axios的使用，需要一个data.json来读取，这里我看的是狂神的视频所以使用狂神一开始就准备好的json：{ "name": "狂神说Java", "url": "https://blog.kuangstudy.com", "page": 1, "isNonProfit": true, "address": { "street": "含光门", "city": "陕西西安", "country": "中国" }, "links": [ {
复制链接

扫一扫