带引导程序的Vue.JS创建菜单

// HTML文件
<div id="app"></div>

// JavaScript文件
var app = new Vue({
  el: '#app',
  // 其他配置项
});

var app = new Vue({
  el: '#app',
  data: {
    menuItems: [
      { name: '首页', link: '/home' },
      { name: '产品', link: '/products' },
      { name: '关于我们', link: '/about' }
    ]
  }
});

var app = new Vue({
  el: '#app',
  data: {
    menuItems: [
      { name: '首页', link: '/home' },
      { name: '产品', link: '/products' },
      { name: '关于我们', link: '/about' }
    ]
  },
  components: {
    'menu': {
      template: `
        <ul>
          <li v-for="item in menuItems" :key="item.name">
            <a :href="item.link">{{ item.name }}</a>
          </li>
        </ul>
      `,
      props: ['menuItems']
    }
  }
});

<div id="app">
  <menu :menu-items="menuItems"></menu>
</div>