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 ...

常用目录结构:

Vue基础复习_第1张图片

组件化思想:整体化、复用化、独立化(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变化的方法:


 

你可能感兴趣的:(Vue)