Vue基礎複習

watch屬性:監聽指定值的變化（異步場景）

computed計算屬性：方法裡的任意一個值發生變化就會監聽到（資料關聯）

條件渲染：v-if v-else v-else-if  v-show

清單渲染：v-for

屬性綁定：v-bind:xxx (:xxx)    class綁定（:class） style綁定（:style）

vue-cli腳手架：

安裝全局vue-cli：$ npm install -g @vue/cli

建立項目：進入檔案目錄執行$ vue create hello-world

選擇預設建立，然後按需要添加其他庫，預設使用的是yarn，

安裝vuex、vue-router、less，yarn add ...

常用目錄結構：

元件化思想：整體化、複用化、獨立化（300行原則、複用化原則）

元件狀态管理（vuex）

多元件的混合使用，多頁面，複雜業務（vue-router）

元件間傳參，消息，事件管理（props，emit/on，bus）

vue-router

元件頁面

<router-link to="/home">Home</router-link>

<router-view></router-view>
           

在router.js中定義router

import Router from "vue-router";
Vue.use(Router);

const routes = [
    {
        path: '/home',
        name: 'home',
        component: Home
    }
];
var router = new Router({
    routes
});

export default router;
           

動态路由：path變為/user/:id

<router-link to="/user/123"></router-link>
<router-link :to="{name:'user', params: {id: 123}}"></router-link>
           

在元件中想要獲得這個id值，可以通過this.$router來擷取router執行個體，可以定義一個computed屬性：

computed: {
    dynamicSegment() {
        return this.$router.params.id
    }
}
           

動态路由在來回切換時，由于指向元件，vue不會銷毀再建立這個元件，而是複用這個元件，元件的生命周期就沒有用了。就隻能在元件内部利用watch來監聽$router的變化

data() {
    return {
        dynamicSegment: ''
    }
}
watch: {
    $router(to, from) {
            // to表示你要去的元件，from表示的是從哪個元件來的
        this.dynamicSegment = to.params.id
    }
}
           

路由嵌套:

const routes = [
    {
        path: '/home',
        component: home,
        children: [
            {
                path: 'girl',
                component: girl
            },
            {
                path: 'boy',
                component: boy
            }
        ]
    }
]
           

vuex：元件狀态的集中管理

單項資料流： Actions -->state -->View -->Actions

多個視圖依賴于同一個狀态（菜單導航）

來自不同視圖的行為要更新同一狀态（彈幕）

store.js:

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export default new Vuex.Store({
    state: {
        count: 0,
        list: [
            {id: 1, done: true},
            {id: 2, done: false}
        ] 
    },  // 元件的狀态
    getters: {
        todo: state => {
            return state.list.filter(el => el.done)
        }, // Getter接受state作為其第一參數

        todoCount: (state, getters) => {
            return getters.todo.length
        }, // Getter接受其他getter作為第二參數

        getTodoById: (state) => (id) => {
            return state.list.find(el => el.id === id)
        } // 讓getter傳回一個函數，來實作給getter傳參。在對store裡的數組進行查詢時非常有用
    }, // 相當于store的計算屬性，getter的傳回值會根據他的依賴被緩存起來，依賴值發生變化時會被重新計算
    mutations: {
        increase () {
            this.state.count ++
        }
    }, // 改變元件狀态的方法集
    actions: {

    }
})
           

元件中使用count值：

import store from '@/store';

export default {
    name: 'Info',
    store,
    data () {
        return {
            msg: store.state.count
        }
    }
}
           

元件中出發count變化的方法：

<template>
    <div>
        <button @click="add()">添加</button>
    </div>
</template>
<script>
import store from '@/store';
export default {
    name: 'Info',
    store,
    methods: {
        add() {
            store.commit('increase')
        }
    }
}
</script>