{
  "name": "咸魚(yú)_翻身",
  "url": "https://blog.csdn.net/aaa123_456aaa",
  "page": 1,
  "address": {
    "street": "湘橋區(qū)",
    "city": "潮州市",
    "country": "中國(guó)"
  },
  "links": [
    {
      "name": "咸魚(yú)_翻身1",
      "url": "https://blog.csdn.net/aaa123_456aaa"
    },
    {
      "name": "咸魚(yú)_翻身2",
      "url": "https://blog.csdn.net/aaa123_456aaa"
    },
    {
      "name": "咸魚(yú)_翻身3",
      "url": "https://blog.csdn.net/aaa123_456aaa"
    }
  ]
}

記得看一下自己的環(huán)境哦，這里要選支持ES6才行。

在這里插入圖片描述

2、接下來(lái)我們創(chuàng)建一個(gè).html文件，使用Axios異步通信，來(lái)實(shí)現(xiàn)數(shù)據(jù)通信。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="vue">
    <div>
        {{info.name}}
        {{info.address}}
    </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 type="text/javascript">
    var vm = new Vue({
        el: "#vue",
        // 注意：* data 是全局的，在大項(xiàng)目中容易污染數(shù)據(jù) * 將data封裝成一個(gè)函數(shù)，我們?cè)趯?shí)例化組件的時(shí)候只是調(diào)用了這個(gè)函數(shù)生成的數(shù)據(jù)副本，避免了數(shù)據(jù)污染，這里作為講解就不寫(xiě)了。
        data(){
            return{
                // 請(qǐng)求的返回參數(shù)格式應(yīng)該和json字符串一樣，比較標(biāo)準(zhǔn)一點(diǎn)，當(dāng)然直接為空也是可以的。
                info:{
                    name: null,
                    address:{
                        street: null,
                        city: null,
                        country: null
                    },
                }
            }
        },
        mounted(){//鉤子函數(shù)，就是程序執(zhí)行的時(shí)候他可以插入程序的中間去執(zhí)行
            //鏈?zhǔn)骄幊?，記得使用ES6支持版本
            axios.get('../data.json').then(response=>(this.info=response.data))
        }
    });
</script>
</body>
</html>

運(yùn)行結(jié)果：

在這里插入圖片描述

3、當(dāng)然上面是比較標(biāo)準(zhǔn)的寫(xiě)法，我們不妨簡(jiǎn)寫(xiě)一下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="vue">
    <div>
        {{info.name}}
        {{info.address}}
    </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 type="text/javascript">
    var vm = new Vue({
        el: "#vue",
        // 注意：這里是data:{}，但里面一定有一個(gè)原始參數(shù)info，然后axios獲取到的數(shù)據(jù)綁定到info上
        // data是屬性 ，屬性值可以是對(duì)象 也可以是函數(shù)，函數(shù)本質(zhì)上也是對(duì)象，vue會(huì)對(duì)data屬性做類型判斷采取不同的處理方式
        data: {
            info:{}
            },
        mounted(){
            axios.get('../data.json').then(response=>(this.info=response.data))
        }
    });
</script>
</body>
</html>

運(yùn)行結(jié)果：

在這里插入圖片描述

4、我們對(duì)于url的交互要注意一下，因?yàn)檫@個(gè)要使用v-bind來(lái)綁定值。

<div id="vue" v-clock>
    <div>
        {{info.name}}
        {{info.address}}
        <a v-bind:href="info.url">點(diǎn)擊進(jìn)入我的博客</a>
    </div>
</div>

點(diǎn)擊將會(huì)跳轉(zhuǎn)，有興趣的小伙伴可以點(diǎn)個(gè)關(guān)注呀！

在這里插入圖片描述

5、提示

有些朋友可能網(wǎng)絡(luò)不好，你就會(huì)看見(jiàn)頁(yè)面加載過(guò)程中會(huì)先加載一個(gè)模板，這與他Vue的生命周期有關(guān)：

在這里插入圖片描述

有些小伙伴可能會(huì)覺(jué)得很丑，這里就提供一個(gè)解決方法，讓他的那一瞬間變成白色，而不是先出現(xiàn)模板：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*<!--v-clock：解決閃爍問(wèn)題 -->*/
        [v-clock]{
            display: none;
        }
    </style>
</head>
<body>
<!--自定義一個(gè)v-clock-->
<div id="vue" v-clock>
    <div>
        {{info.name}}
        {{info.address}}
    </div>
</div>