vue常用的小知识点

2019独角兽企业重金招聘Python工程师标准>>>

一、this.$nextTick方法

    是一个更新视图的方法。在某些时候需要修改数据或dom时不会更新，可以通过this.$nextTick方法实现更新视图更新数据、dom结构。

    例：this.$nextTick(function () { console.log('我可以更新视图。') })

二、Vue.set()方法(可用在对象、数组)

    是一个更改数据源的数据。动态更改数据，可以添加、修改。如果data中没有改数据源，可以通过Vue.set()实现动态添加修改数据。

    例：Vue.set(数据源, 属性名, 值) Vue.set(this.data, 'id', 1)

三、设置代理(在config/index.js)

    proxyTable: {

        '/api/auth': {target: 'http://www.xxxx.com', changeOrigin: true, secure: false}

    }

四、子组件接收父组件数据(props)

    子组件 props: {url:{type:Function,required: true}}（接收数据）

     satch: { url:{immediate: true, handler: 'handlerFun'} }（监听数据变化，并回调）

五、父组件接收子组件数据(this.$emit('fun', data))

    父组件<child @childFun="parentFun" />

    parentFun(data) {console.log(data)}

六、vuex状态管理模块的store模式

    1.创建store实例(每个应用只包含一次)

        const store = new VuexStore({

            state: { // 存储状态

                todos: ''

            },

            getters: { // 读取状态信息

                doneTodos: state => state.todos

            },

            mutation: { // 修改状态

                   set_todos: (state, todosName) => {

                        state.todos = todosName

                    }

            },

            actions: { // 通过函数提交一个mutation

                todoFun ({ commit }, todosName) {

                    return Promise(resolve => {

                        commit('set_todos', todosName)

                        resolve()

                    })

                }

            }

        })

    2.使用module模块(store/)

        1>index.js

            import user from './user'

            import getters from './getters'

            const store = new Vuex.Store({

                modules: {

                    user

                },

                getters

            })

        2>user.js

            const user = {

                state: { name: '' }, // 状态

                mutations: {  // 更改状态

                    set_name: (state, userName) => {

                        state. name = userName

                    }

                },

                actions: { 通过函数更改状态

                    nameFun ({ commit }, userName) {

                        return new Promise(resolve => {

                            commit('set_name', userName)

                            resolve()

                        })

                    }

                }

            }

            export default user

        3>getters.js

            const getters = { // 读取状态

                name: state => state.user.name

            }

            export default getters

    3.在组件(.vue)中使用

        1>读取

            this.$store.getters.name

        2>直接更改状态

            this.$store.commit('set_name', '设置状态')

        3.>使用函数更改状态

            this.$store.dispatch('nameFun', '函数更改状态').then(() => {})

七、路由拦截器(permission.js)

    const whiteList = ['/login'] // 免进白名单

    router.beforeEach((to, from, nex) => {

        console.log(to) // 这个使用较多

        console.log(from)

        nex()

        if (whiteList.indexOf(to.path) !== -1) { next() }

    })

    

转载于:https://my.oschina.net/u/3431829/blog/2046364