0830總結 Vue CLI 項目中相關操作一.前臺路由的基本工作流程目錄結構 App.vue：根組件 Nav.vue：小組件 PageFirst.vue：頁面組件 PageSecond.vue：頁面組件 router.js：路由配置二.配置全局樣式文件目錄結構 global.css mai ...

0830總結

Vue-CLI 項目中相關操作

一.前臺路由的基本工作流程

目錄結構

|vue-proj
|   |src
|   |   |components
|   |   |   |Nav.vue
|   |   |views
|   |   |   |PageFirst.vue
|   |   |   |PageSecond.vue
|   |   |App.vue
|   |   |router.js

App.vue：根組件

<template>
    <div id="app">
        <!--根組件只需要書寫router-view-->
        <!--router-view就是vue-router插件路由占位標簽-->
        <router-view></router-view>
    </div>
</template>

Nav.vue：小組件

<template>
    <div class="nav">
        <!--router-link就是vue-router插件路由頁面轉跳的標簽，頁面載入後會被解析為a標簽-->
        <!--router-link不同於a標簽，路由轉跳之後更換組件，不會發送頁面轉跳，用to屬性設置轉跳路徑-->
        <router-link to="/page-first">first</router-link>
        <router-link :to="{name: 'page-second'}">second</router-link>
        <router-link to="/course">課程</router-link>
        <!-- to後跟路由路徑 | :to後可以用name設置路由別名 -->
    </div>
</template>

<script>
    export default {
        name: "Nav"
    }
</script>

<style scoped>
    .nav {
        height: 100px;
        background-color: rgba(0, 0, 0, 0.4);
    }
    .nav a {
        margin: 0 20px;
        font: normal 20px/100px '微軟雅黑';
    }
    .nav a:hover {
        color: red;
    }
</style>

PageFirst.vue：頁面組件

<template>
    <div class="page-first">
        <Nav></Nav>
        <h1>page-first</h1>
    </div>
</template>

<script>
    // 使用
    import Nav from '@/components/Nav'
    export default {
        name: "PageFirst",
        components: {
            Nav
        }
    }
</script>

<style scoped>
    .page-first {
        width: 100%;
        height: 800px;
        background: orange;
    }
    h1 {
        text-align: center;
    }
</style>

PageSecond.vue：頁面組件

<template>
    <div class="page-second">
        <Nav></Nav>
        <h1 @click="printTitle">{{ title }}</h1>
        <input type="text" v-model="title">
    </div>
</template>

<script>
    import Nav from '@/components/Nav'
    export default {
        name: "PageSecond",
        data() {
            return {
                title: 'page-second'
            }
        },
        methods: {
            printTitle() {
                console.log(this.title)
            }
        },
        components: {
            Nav
        },
    }
</script>

<style scoped>
    .page-second {
        width: 100%;
        height: 800px;
        background: pink;
    }
    h1 {
        text-align: center;
    }
</style>

router.js：路由配置

import Vue from 'vue'
import Router from 'vue-router'
import PageFirst from './views/PageFirst'
import PageSecond from './views/PageSecond'

Vue.use(Router);

export default new Router({
    mode: 'history',  // 組件更換模擬頁面轉跳形成瀏覽器歷史記錄
    base: process.env.BASE_URL,
    routes: [
        // 路由就是 url路徑 與 vue組件 的映射關係
        // 映射出的組件會替換 根組件 中的 router-view 標簽
        // 通過 router-link 標簽完成 url路徑 的切換
        {  
            path: '/page-first',
            name: 'page-first',
            component: PageFirst
        },
        {
            path: '/page-second',
            name: 'page-second',
            component: PageSecond
        },
    ]
})

二.配置全局樣式文件

目錄結構

|vue-proj
|   |src
|   |   |assets
|   |   |   |css
|   |   |   |   |global.css
|   |   |main.js

global.css

html, body, h1, ul {
    margin: 0;
    padding: 0;
}
ul {
    list-style: none;
}
a {
    text-decoration: none;
    color: black;
}

/* router-link標簽激活狀態擁有的類名 */
.router-link-exact-active.router-link-active {
    color: greenyellow;
    border-bottom: 2px solid greenyellow;
}

main.js

// 新增內容
// 配置全局css
import '@/assets/css/global.css'

三.組件生命周期鉤子

概念

一個組件從創建到銷毀，整個過程中的特殊的時間節點回調的方法，稱之為生命周期鉤子

如：一個組件創建成功就會回調 created方法，內部數據要更新和更新完畢分別調用 beforeUpdate方法與updated方法

案例

<template>
    <div class="page-second">
        <Nav></Nav>
        <h1 @click="printTitle">{{ title }}</h1>
        <input type="text" v-model="title">
    </div>
</template>

<script>
    import Nav from '@/components/Nav'
    export default {
        name: "PageSecond",
        data() {
            return {
                title: 'page-second'
            }
        },
        methods: {
            printTitle() {
                console.log(this.title)
            }
        },
        components: {
            Nav
        },
        beforeCreate() {
            console.log('開始創建組件');
            console.log(this.title);
            console.log(this.printTitle);
            this.title = '呵呵';
        },
        created() {  // 重點
            console.log('組件創建成功');
            console.log(this.title);
            console.log(this.printTitle);
            // 請求後臺數據，完成數據的更新
            this.title = '嘿嘿';
        },
        beforeMount() {
            console.log('組件開始渲染');
        },
        mounted() {
            console.log('組件渲染成功');
            this.title = '嘻嘻';
        },
        beforeUpdate() {
            console.log('數據開始更新');
        },
        updated() {
            console.log('數據更新完畢');
        },
        activated() {
            console.log('組件激活');
        },
        deactivated() {
            console.log('組件停用');
        },
        destroyed() {
            console.log('組件銷毀成功');
        }
    }
</script>

<style scoped>
    .page-second {
        width: 100%;
        height: 800px;
        background: pink;
    }
    h1 {
        text-align: center;
    }
</style>

四.路由重定向

router.js

import Vue from 'vue'
import Router from 'vue-router'
import PageFirst from './views/PageFirst'
import PageSecond from './views/PageSecond'
import Course from './views/Course'

Vue.use(Router);

export default new Router({
    mode: 'history',
    base: process.env.BASE_URL,
    routes: [
        {
            path: '/page-first',
            name: 'page-first',
            component: PageFirst
        },
        {  // 重定向路由的兩種方式
            path: '/page/first',
            // redirect: {'name': 'page-first'},
            redirect: '/page-first'
        },
    ]
})

五.頁面組件小組件綜合案例

目錄結構

|vue-proj
|   |src
|   |   |components  小組件
|   |   |   |CourseCard.vue
|   |   |views  頁面組件
|   |   |   |Course.vue
|   |   |router.js

CourseCard.vue

<template>
    <div class="course-card">
        <div class="left" :style="{background: card.bgColor}"></div>
        <div class="right">{{ card.title }}</div>
    </div>
</template>

<script>
    export default {
        name: "CourseCard",
        props: ['card']
    }
</script>

<style scoped>
    .course-card {
        margin: 10px 0 10px;
    }
    .course-card div {
        float: left;
    }
    .course-card:after {
        content: '';
        display: block;
        clear: both;
    }
    .left {
        width: 50%;
        height: 120px;
        background-color: blue;
    }
    .right {
        width: 50%;
        height: 120px;
        background-color: tan;
        font: bold 30px/120px 'STSong';
        text-align: center;
    }
</style>

CourseCard.vue

<template>
    <div class="course">
        <Nav></Nav>
        <h1>課程主頁</h1>
        <CourseCard :card="card" v-for="card in card_list" :key="card"></CourseCard>
    </div>
</template>

<script>
    import Nav from '@/components/Nav'
    import CourseCard from '@/components/CourseCard'
    export default {
        name: "Course",
        data() {
            return {
                card_list: []
            }
        },
        components: {
            Nav,
            CourseCard
        },
        created() {
            let cards = [
                {
                    id: 1,
                    bgColor: 'red',
                    title: 'Python基礎'
                },
                {
                    id: 3,
                    bgColor: 'blue',
                    title: 'Django入土'
                },
                {
                    id: 8,
                    bgColor: 'yellow',
                    title: 'MySQL刪庫高級'
                },
            ];
            this.card_list = cards;
        }
    }
</script>

<style scoped>
    h1 {
        text-align: center;
        background-color: brown;
    }
</style>

router.js

import Vue from 'vue'
import Router from 'vue-router'
import PageFirst from './views/PageFirst'
import PageSecond from './views/PageSecond'
import Course from './views/Course'

Vue.use(Router);

export default new Router({
    mode: 'history',
    base: process.env.BASE_URL,
    routes: [
        {
            path: '/page-first',
            name: 'page-first',
            component: PageFirst
        },
        {
            path: '/page/first',
            // redirect: {'name': 'page-first'},
            redirect: '/page-first'
        },
        {
            path: '/page-second',
            name: 'page-second',
            component: PageSecond
        },
        {
            path: '/course',
            name: 'course',
            component: Course
        },
    ]
})