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

组件页面

Home

在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

在组件中想要获得这个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变化的方法：