用vue menu.js怎么做

在 Vue 中实现一个菜单组件，可以使用 Vue.js 的组件开发方式，结合 HTML、CSS 和 JavaScript 实现。

下面是一个简单的 Vue 菜单组件示例：

<template>
  <div class="menu">
    <ul>
      <li v-for="(item, index) in menuItems" :key="index" @mouseover="showSubMenu(index)" @mouseout="hideSubMenu(index)">
        <a :href="item.url">{{ item.label }}</a>
        <ul v-if="item.subMenuVisible">
          <li v-for="(subItem, subIndex) in item.subMenu" :key="subIndex">
            <a :href="subItem.url">{{ subItem.label }}</a>
          </li>
        </ul>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      menuItems: [
        {
          label: '首页',
          url: '#',
          subMenu: [],
          subMenuVisible: false
        },
        {
          label: '新闻',
          url: '#',
          subMenu: [
            {
              label: '国内新闻',
              url: '#'
            },
            {
              label: '国际新闻',
              url: '#'
            }
          ],
          subMenuVisible: false
        },
        {
          label: '产品',
          url: '#',
          subMenu: [
            {
              label: '产品1',
              url: '#'
            },
            {
              label: '产品2',
              url: '#'
            }
          ],
          subMenuVisible: false
        },
        {
          label: '关于我们',
          url: '#',
          subMenu: [],
          subMenuVisible: false
        },
        {
          label: '联系我们',
          url: '#',
          subMenu: [],
          subMenuVisible: false
        }
      ]
    }
  },
  methods: {
    showSubMenu(index) {
      this.menuItems[index].subMenuVisible = true;
    },
    hideSubMenu(index) {
      this.menuItems[index].subMenuVisible = false;
    }
  }
}
</script>

<style scoped>
.menu {
  font-size: 16px;
}
.menu ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.menu ul li {
  float: left;
  position: relative;
  margin-right: 10px;
}
.menu ul li ul {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  padding: 0;
  margin: 0;
  z-index: 999;
}
.menu ul li ul li {
  float: none;
  margin: 0;
  width: 100%;
}
.menu ul li ul li a {
  display: block;
  padding: 5px;
  background-color: #f8f8f8;
  color: #333;
  text-decoration: none;
}
.menu ul li ul li a:hover {
  background-color: #e0e0e0;
}
</style>

以上代码定义了一个名为 "menu" 的 Vue 组件，包含一个 data 对象，其中 menuItems 数组存储了菜单项的数据，包括标签、链接和子菜单等信息。同时，该组件的 methods 对象中定义了两个方法，showSubMenu 和 hideSubMenu，分别用于显示和隐藏子菜单。

在 HTML 部分，使用 v-for 指令动态渲染菜单项和子菜单。同时，利用 @mouseover 和 @mouseout 事件绑定，实现菜单项鼠标移入和移出时显示和隐藏子菜单的效果。

在 CSS 部分，定义了菜单的样式，包括字体大小、颜色、边距等。同时，利用 position 和 z-index 属性，使子菜单可以覆盖在菜单项之上，实现下拉菜单的效果。

需要注意的是，上述代码中的 CSS 样式是通过添加了 scoped 属性的 style 标签定义的，这样可以保证组件内部的样式不会影响到其他组件或全局样式。

以上就是一个使用 Vue 实现的简单菜单组件的示例。你可以根据自己的需求和喜好，进行样式和交互效果的定制和扩展。