Vue框架入門學習(四)——Vue2初識

六、Vue2

1.基本結構

文件的相對位置

一個基本的Vue文件分爲三層，html的模板層，組件層，渲染層
也可以省略之前所有的js渲染，用vue做渲染

新建一個Child.vue

然後將Child.vue渲染到cmp1.js上

在組件層，將child引入進來，並且註冊，就可以渲染生效了。

然後cmp作爲child父級的身份，僅把cmp添加到Vue的入口index.js主模板內，由於綁定了div1，所以主頁index.html就可以直接生效了，換句話說，也可以說是把cmp1當做了一個slot，層層堆疊，將頁面畫出來。
當然也可以稍微隨便添加點css樣式

開啓熱更新，會自動彈出對應的頁面。

2.App.vue

App.vue作爲一個主的組件可以配置路由等元素屬性，像之前作爲父級的cmp1，也可以寫在app裏，那麼現在就創建一個app，然後將cmp1的內容放進去，再將原來的cmp1.js刪除
這是新的文件相對位置

然後調整文件導入app的相對位置，避免報錯，整理之後重新編譯。

然後創建路由表./router/index.js

import Vue from 'vue';

import router from 'vue-router';
import Index from '@/index.vue';
import News from '@/news.vue';

Vue.use(router);

export default new router({
    routes:[
        {
            path:'/',
            name:'index',
            component:Index
        },
        {
            path:'/news',
            name:'news',
            component:News
        }
    ]
});

不創建路由表掛載，元素就不會起作用，就像router-link router-view
切記一點！！！！import Vue-router進來的時候，一定要把參數名定義成router，Vue才能識別，不然就會報錯說無法匹配src/app
創建路由表之後，將兩個路由地址對應的網頁進行簡單設計。

最後來到app.vue內進行路由地址的跳躍行爲，使用router-link+v-bind即可

最後熱更新調試到頁面就可以了。

3.Axios組件通信

首先引入Axios vue-Axios的第三方庫，然後導入到Vue的入口處

然後就可以使用了
但切記，一定要按照順序use，不然會報錯

爲了驗證我們的數據通信，所以在根目錄創建一個data/1.json,並且做一個異步的訪問

<template>
    <div class="">
        首頁
    </div>
</template>

<script>
    export default {
        name:'index',
        data() {
            return{}
        },
        async created() {
            let {data} = await this.axios.get('http://localhost:8081/data/1.json');
            console.log(data);
        }
    }
</script>

<style scoped>

</style>

然後運行成功之後，就可以訪問到數據。