vue实现简单的菜单

需要掌握的知识

关于prop：vue官方文档中说明

HTML 中的特性名是大小写不敏感的，所以浏览器会把所有大写字符解释为小写字符。这意味着当你使用 DOM 中的模板时，camelCase (驼峰命名法) 的 prop 名需要使用其等价的 kebab-case (短横线分隔命名) 命名：

Vue.component('blog-post', {
  // 在 JavaScript 中是 camelCase 的
  props: ['postTitle'],
  template: '
{{ postTitle }}
'
})

重申一次，如果你使用字符串模板，那么这个限制就不存在了。

字符串模板：指的是在组件选项里用 template:"" 指定的模板，换句话说，写在 js 中的 template:"" 中的就是字符串模板。比如下面这个：

var tmp = new Vue({
    template:""
});

非字符串模板：在单文件里用 指定的模板，换句话说，写在 html 中的就是非字符串模板。

但是在调用prop值时，又得与props的属性值名称一样。

关于过渡：transition

过渡的元素只能是以下之一：

1. 条件渲染 (使用 v-if)
2. 条件展示 (使用 v-show)
3. 动态组件
4. 组件根节点

在进入/离开的过渡中，会有 6 个 class 切换。

v-enter：定义进入过渡的开始状态。在元素被插入之前生效，在元素被插入之后的下一帧移除。

v-enter-active：定义进入过渡生效时的状态。在整个进入过渡的阶段中应用，在元素被插入之前生效，在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数。

v-enter-to: 2.1.8版及以上 定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时 v-enter 被移除)，在过渡/动画完成之后移除。

v-leave: 定义离开过渡的开始状态。在离开过渡被触发时立刻生效，下一帧被移除。

v-leave-active：定义离开过渡生效时的状态。在整个离开过渡的阶段中应用，在离开过渡被触发时立刻生效，在过渡/动画完成之后移除。这个类可以被用来定义离开过渡的过程时间，延迟和曲线函数。

v-leave-to: 2.1.8版及以上 定义离开过渡的结束状态。在离开过渡被触发之后下一帧生效 (与此同时 v-leave 被删除)，在过渡/动画完成之后移除。

---

Demo

html

css

.navul {
    width: 200px;
    height: 1000px;
    background-color: #ddd;
    border: 1px dotted #457896;
}
* {
    margin: 0;
    padding: 0;
    list-style: none;
    text-decoration: none;
}

#app {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.navul {
    padding: 10px;
}

.navul > li {
    padding: 5px 0;
    border-bottom: 1px dashed #fff;
}

.navul li a {
    color: #457896;
}

.fade-enter-active, .fade-leave-active {
    transition: all 1s ease;
}

.fade-enter, .fade-leave-to {
    transform: translateX(100px);
    opacity: 0;
}

.fade-enter-to, .fade-leave {
    opacity: 1;
}

.hide {
    display: none;
}


a.active {
    color: #ec6237 !important;
}

js

Vue.component('my-nav', {
    props: ['mynavData'],
    template: '#navTemp',
    data() {
        return {
            indexGroup: {}
        }
    },
    methods: {
        toggleShow: function(i, j) {
            if(j != undefined) {
                var index = i * 10 + j;
                this.changeValue(index)
            } else {
                this.changeValue(i)
            }
        },
        changeValue: function(k) {
            if(this.indexGroup[k]) {
                this.$set(this.indexGroup, k, false)
            } else {
                this.$set(this.indexGroup, k, true)
            }
        }
    }
})

new Vue({
    el: '#app',
    data: {
        navData: [
            {name: 'desc', value: 'Biu'},
            {name: 'job', value: 'Web', item: ['app', 'program']},
            {name: 'person', value: 'appearance', item: ['tall', 'weight']}
        ]
    }
})

github链接: https://github.com/Biu-Huang/vue-menu/blob/master/menu.html