Vue学习笔记一（2019）

1.Vuex

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

每一个 Vuex 应用的核心就是 store(仓库)。“store”基本上就是一个容器，它包含着你的应用中大部分的状态 (state)。

 1 const store = new Vuex.Store({
 2   state: {
 3     count: 0
 4   },
 5   mutations: {
 6     increment (state) {
 7       state.count++
 8     }
 9   }
10 })
11 
12 store.commit('increment')
13 
14 console.log(store.state.count) 

api：https://vuex.vuejs.org/zh/guide/getters.html

2.

...mapGetters

...是ES6的扩展运算符，表示不定个数。

应用：

1 const [first, ...rest] = [1, 2, 3, 4, 5];  
2 first // 1  
3 rest // [2, 3, 4, 5]  
4 const [first, ...rest] = [];  
5 first // undefined  
6 rest // []:  
7 const [first, ...rest] = ["foo"];  
8 first // "foo"  
9 rest // []

详参

https://hao5743.github.io/2017/02/17/es6%20%E6%89%A9%E5%B1%95%E8%BF%90%E7%AE%97%E7%AC%A6%20%E4%B8%89%E4%B8%AA%E7%82%B9%EF%BC%88...%EF%BC%89/

mapGetters 辅助函数仅仅是将 store 中的 getter 映射到局部计算属性

1 mapGetters({
2   // 把 `this.doneCount` 映射为 `this.$store.getters.doneTodosCount`
3   doneCount: 'doneTodosCount'
4 })

3.vue的ref属性

<div class="menu" ref="menuBorder">

就可以将class为menu的dom属性集合，即menuBorder挂载到this.refs上，通过this.refs.menuBorder就可以访问了

类似DOM选择器的效果

示例：

js：

export default {
    data() {
        return {
            menuList: [{
                name: '一级目录',
                children: [
                    {
                        name: '二级目录',
                        children: [
                            {
                                name: '三级目录',
                                children: ['内容']
                            },
                            {
                                name: '二级目录',
                                children: [{
                                    name: '三级目录',
                                    children: ['内容']
                                }]
                            },
                            {
                                name: '二级目录',
                                children: [{
                                    name: '三级目录',
                                    children: ['内容']
                                }]
                            },
                            {
                                name: '二级目录',
                                children: [{
                                    name: '三级目录',
                                    children: ['内容']
                                }]
                            },
                            {
                                name: '二级目录',
                                children: [{
                                    name: '三级目录',
                                    children: ['内容']
                                }]
                            },
                            {
                                name: '二级目录',
                                children: [{
                                    name: '三级目录',
                                    children: ['内容']
                                }]
                            }
                        ]
                    },{
                        name: '二级目录',
                        children: [
                            {
                                name: '三级目录',
                                children: ['内容']
                            },
                            {
                                name: '二级目录',
                                children: [{
                                    name: '三级目录',
                                    children: ['内容']
                                }]
                            },
                            {
                                name: '二级目录',
                                children: [{
                                    name: '三级目录',
                                    children: ['内容']
                                }]
                            },
                            {
                                name: '二级目录',
                                children: [{
                                    name: '三级目录',
                                    children: ['内容']
                                }]
                            }
                        ]
                    }],
            }]
        };
    },

    methods:{
        moveArrow:function (e) {
            console.log($(e.target).offset().top)
            let parentTop=this.$refs.menuBorder.offsetTop;
            var top = $(e.target).offset().top - parentTop;
            $('.arrow').css('top', top );
        }
    }
};

html：

 1 <style src="./example.less" lang="less" scoped></style>
 2 <template>
 3     <div class="menu">
 4         <div>
 5             <div class="side-bar">
 6             </div>
 7             <ul class="catalog-list" >
 8                 <li class="level1" v-for="firstLevel in menuList">
 9                     <em class="circle-pointer"></em>
10                     <a href="#" class="title-link">{{firstLevel.name}}</a>
11                     <ul v-if="firstLevel.children.length>0">
12                         <li class="level2" v-for="secondLevel in firstLevel.children">
13                             <em class="pointer"></em>
14                             <a href="#" class="title-link">{{secondLevel.name}}</a>
15 
16                             <ul v-if="secondLevel.children.length>0">
17                                 <li class="level3"
18                                     @click="moveArrow"
19                                     v-for="thirdLevel in secondLevel.children">
20                                     <a :href="'#item_'+thirdLevel.id" class="title-link">{{thirdLevel.name}}</a>
21                                 </li>
22                             </ul>
23                         </li>
24                     </ul>
25                 </li>
26                 <li class="last"> <em class="circle-pointer"></em></li>
27                 <a class="arrow" href="javascript:void(0);"></a>
28             </ul>
29 
30         </div>
31 
32     </div>
33 </template>
34 <script src="./example.js"></script>

效果：

4.