vue2.0 + element-ui 實戰項目-使用本地的json模擬數據（七）

1：在項目裏面static的文件夾底下新建一個test.json文件

test.json:

{
    "first":[

        {"name":"520","nick":"我愛你"},

        {"name":"521","nick":"我願意"},

        {"name":"1314","nick":"一生一世"}
    ]

}

2:在views文件夾底下新建一個test.vue的組件，用來測試一下，
vue2.0使用本地的json數據，調用前面自己寫的json.

vue頁面代碼參考

<template>
    <div id="app">
    </div>
</template>
<script>
    import axios from "axios";
    export default {
        name: "app",
        data() {
            return {
                itemList: []
            }
        },
        mounted() {
            this.getData();
        },
        methods: {
            getData() {
                axios.get('static/test.json').then(response => {
                    console.log(response.data);
                }, response => {
                    console.log("error");
                });
            }
        }
    }
</script>

3：在瀏覽器裏面，我們可以看到，mock裏面的數據請求成功顯示如下
使用 console.log打印一下返回值。

---

前面的：總結下，看起來會方面一點。都是用零散的時間記錄的筆記，有時候想起來會寫一些，不怎麼系統，這裏就把之前的拿出來總結 了一下，還算是比較連貫，還能有點作用，新手看看還是可以懂的~~

vue2.0 + element-ui 實戰項目- 搭建環境(一）
https://www.jianshu.com/p/77637168bc28

vue2.0 + element-ui 實戰項目-導航欄跳轉路由(二）
https://www.jianshu.com/p/4fc106dfcbae

vue2.0 + element-ui 實戰項目-axios請求數據（三）
https://www.jianshu.com/p/46c1ab3b8e71

vue2.0 + element-ui 實戰項目-渲染表格（四）
https://www.jianshu.com/p/fea8cacc04b9

vue2.0 + element-ui 實戰項目-點擊按鈕彈出form表單（五）
https://www.jianshu.com/p/904f08372e71

vue2.0 + element-ui 實戰項目-實現一個簡單的輪播圖（六）
https://www.jianshu.com/p/a80d384b922d