通过指令实现下拉菜单
下拉菜单在实际应用中很常见，当鼠标移动到某个菜单上时会弹出一个子菜单列表，每个子菜单都是可以单击的，当鼠标移出整个菜单列表区域，子菜单列表隐藏。
为了让读者对指令的应用有更深的认识，这里模仿天猫的下拉菜单给出一个自己的实现。最终的呈现效果如下图所示:
菜单是导航链接的另一种呈现形式，通常用<a>元素来定义。在页面中编写菜单时，一种方式是将所有的菜单和子菜单项硬编码实现，换句话说，就是一堆<a>元素堆砌在一起；另一种方式就是把菜单和子菜单按照层级关系定义为一个大的JavaScript对象，然后通过脚本动态呈现。前者实现起来简单、直观，但扩展和维护不方便；后者定义的对象稍显复杂，但扩展和维护很方便，此外，还能让模版代码更为简介清晰。
本例将采用第二种方式，然后按照菜单的层级关系通过嵌套的v-for指令循环输出。
我们在Vue实例的数据属性中定义一个menus数组，将各个顶层菜单定义为一个对象，作为数组中的元素，子菜单作为顶层菜单对象的属性嵌套定义。代码示例如下：
data: {
menus: [
{
name: '我的淘宝',
url: '#',
show: false,
subMenus: [
{name: '已买到的宝贝', url: '#'},
{name: '已卖出的宝贝', url: '#'}
]
},
{
name: '收藏夹',
url: '#',
show: false,
subMenus: [
{name: '收藏的宝贝', url: '#'},
{name: '收藏的店铺', url: '#'}
]
}
]
}
我们为每一个顶层菜单对象定义了一个show属性，初始值为false，该属性主要用于控制其下的子菜单是否显示。前面已经说过，下拉菜单的子菜单列表初始是不显示的，只有当鼠标移动到顶层菜单上时才会显示，当鼠标移动到菜单列表外面，子菜单列表要隐藏。这里定义的show属性就是用来标记这两种情况的，当需要显示时，将show设置为true；当需要隐藏时，将show设置为false。
接下来就该使用v-for指令循环输出菜单了。对于这种有多个菜单的，采用v-for指令来进行渲染是非常方便的，菜单可能有二级菜单、三级菜单，这都没关系，无非就是嵌套使用多个v-for指令。另外，子菜单的显示是鼠标移动到顶层菜单上，隐藏是鼠标移动到顶层菜单外部，因此还需要为所有的顶层菜单绑定两个鼠标事件：mouseover和mouseout。
代码示例如下所示：
<div id="app" v-cloak>
<li v-for="menu in menus"
@mouseover="menu.show = !menu.show"
@mouseout="menu.show = !menu.show">
<a :href="menu.url">
{{menu.name}}
</a>
<ul v-show="menu.show">
<li v-for="subMenu in menu.subMenus">
<a :href="subMenu.url">{{subMenu.name}}</a>
</li>
</ul>
</li>
</div>
要说明的是：
- 在<div>元素中使用了v-cloak指令来避免页面加载时的闪烁问题，当然，这需要和CSS样式规则[v-cloak]{display: none}一起使用。
- 绑定mouseover和mouseout事件时采用了v-on指令的简写语法，menu.show初始为false，因此@mouseover的表达式计算结果是将menu.show设为true，而@mouseout表达式的计算结果是将menu.show设为false。
- 子菜单放在一个<ul>元素内部，在该元素上使用v-show指令根据表达式menu.show的值来动态控制子菜单的隐藏和显示。这里不适合使用v-if指令，因为子菜单的显示和隐藏可能会频繁切换。
本例主要的逻辑代码已经在上文列出，剩下的主要是CSS样式的设置。
完整代码如下所示：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
body {
width: 600px;
}
a {
text-decoration: none;
display: block;
color: #fff;
width: 120px;
height: 40px;
line-height: 40px;
border: 1px solid #fff;
border-width: 1px 1px 0 0;
background: #255f9e;
}
li {
list-style-type: none;
}
#app > li {
list-style-type: none;
float: left;
text-align: center;
position: relative;
}
#app li a:hover {
color: #fff;
background: #ffb100;
}
#app li ul {
position: absolute;
left: -40px;
top: 40px;
margin-top: 1px;
font-size: 12px;
}
[v-cloak] {
display: none;
}
</style>
</head>
<body>
<div id="app" v-cloak>
<li v-for="menu in menus"
@mouseover="menu.show = !menu.show"
@mouseout="menu.show = !menu.show">
<a :href="menu.url">
{{menu.name}}
</a>
<ul v-show="menu.show">
<li v-for="subMenu in menu.subMenus">
<a :href="subMenu.url">{{subMenu.name}}</a>
</li>
</ul>
</li>
</div>
<script src="vue.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
menus: [
{
name: '我的淘宝',
url: '#',
show: false,
subMenus: [
{name: '已经买到的宝贝', url: '#'},
{name: '已经卖出的宝贝', url: '#'}
]
},
{
name: '收藏夹',
url: '#',
show: false,
subMenus: [
{name: '收藏的宝贝', url: '#'},
{name: '收藏的店铺', url: '#'}
]
}
]
}
});
</script>
</body>
</html>
