Vue入门学习(3) Axios简单demo演示

最新推荐文章于 2023-02-14 15:49:33 发布

Max恒

最新推荐文章于 2023-02-14 15:49:33 发布

阅读量215

点赞数

文章标签： vue js ajax javascript

本文链接：https://blog.csdn.net/qq_45481709/article/details/115285089

版权

Vue入门学习(1) 什么是双向绑定?

Vue入门学习(2) 基本语法使用

IDEA创建JSON数据

源码


{
  "name": " zhang Java 666 天下无敌",
  "url": "https://blog.csdn.net/qq_45481709?spm=1000.2115.3001.5343" ,
  "page": 1,
  "isNonProfit": true,
  "address":{
    "street":"山东",
    "city":"济南",
    "country":"高新区"
  },
    "links" : [
      {
        "name":"关注我",
        "url":"https://blog.csdn.net/qq_45481709?spm=1000.2115.3001.5343"
      },
      {
      "name":"MaxHeng",
        "url":"https://blog.csdn.net/qq_45481709?spm=1000.2115.3001.5343"
      },
      {
      "name":"关注!!!!",
        "url":"https://blog.csdn.net/qq_45481709?spm=1000.2115.3001.5343"
      }
    ]
}

代码 :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        /*加载期间显示白屏*/
        [v-cloak]{
            display: none;
        }
    </style>

</head>
<body>

<!--v-cloak 解决闪烁问题-->

<div id="vue" v-cloak> <!--拿取数据显示输出-->
    <div>{{info.name}}</div>
    <div>{{info.address.street}}</div>
    <div>{{info.address.city}}</div>
    <div>{{info.address.country}}</div>
<!--    <div>{{info.links}}</div>-->
    <!--这里不能直接打a标签 需要v-bind绑定数据 -->
    <a v-bind:href="info.url">点俺~</a>
</div>

<!--引入 js 文件-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script type="text/javascript">

    var vm  = new Vue({
        el: '#vue',
        //data: 属性 :vm
        data(){
            return{ //接受下方的mounted
                //请求的返回参数格式, 必须和JSON字符串一样
                info:{
                    name: null,
                    url:null,
                    address :{
                        street: null,
                        city:null,
                        country:null
                    },
                    url:null,
                    links:[]
                }
            }
        },
        mounted(){  //钩子函数 链式编程
            axios.get('data.json').then(response=>(this.info=response.data));
        }
    })

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