vue.js 实现垂直菜单分类栏目

原创

mob649e81586edc 2023-08-01 15:17:56 ©著作权

文章标签 Vue 菜单项代码片段 文章分类 Vue.js 前端开发

©著作权归作者所有：来自51CTO博客作者mob649e81586edc的原创作品，请联系作者获取转载授权，否则将追究法律责任

Vue.js 实现垂直菜单分类栏目

简介

在这篇文章中，我将教会你如何使用 Vue.js 实现一个垂直的菜单分类栏目。我们将使用 Vue.js 的组件化开发，这将使你的代码更加模块化和可重用。

整体流程

下面是实现这个功能的整体流程：

步骤	描述
1	创建一个 Vue 实例
2	定义一个菜单组件
3	在 Vue 实例中使用菜单组件
4	为菜单组件传递数据
5	在菜单组件中渲染数据

下面我们来逐步完成这些步骤。

步骤一：创建一个 Vue 实例

首先，我们需要创建一个 Vue 实例来驱动我们的应用。

// 创建一个 Vue 实例
new Vue({
  el: '#app', // 绑定到一个具有 id 为 app 的元素上
});

这个代码片段将创建一个 Vue 实例，并将其绑定到一个具有 id 为 "app" 的元素上。确保你的 HTML 文件中有一个元素具有这个 id。

步骤二：定义一个菜单组件

接下来，我们需要定义一个菜单组件，这个组件将负责渲染菜单的每个分类项。

// 定义一个菜单组件
Vue.component('menu-item', {
  props: ['title'], // 定义一个名为 title 的属性，用来接收传入的菜单标题
  template: `
    <li class="menu-item">
      {{ title }}
    </li>
  `,
});

这个代码片段定义了一个名为 "menu-item" 的组件。它接受一个名为 "title" 的属性，并在模板中使用它来渲染菜单项的标题。

步骤三：在 Vue 实例中使用菜单组件

现在我们可以在 Vue 实例中使用我们刚刚定义的菜单组件了。

// 创建一个 Vue 实例
new Vue({
  el: '#app', // 绑定到一个具有 id 为 app 的元素上
  data: {
    menuItems: [ // 菜单项数据
      { title: '分类1' },
      { title: '分类2' },
      { title: '分类3' },
    ],
  },
});

在这个代码片段中，我们在 Vue 实例的 data 中定义了一个名为 "menuItems" 的数组，用来存储菜单项的数据。

步骤四：为菜单组件传递数据

现在我们需要通过 props 将菜单项的数据传递给菜单组件。

<!-- 在 Vue 实例中使用菜单组件 -->
<div id="app">
  <ul class="menu">
    <menu-item v-for="item in menuItems" :title="item.title" :key="item.title"></menu-item>
  </ul>
</div>

在这个代码片段中，我们使用 v-for 指令遍历菜单项数组，并将每个菜单项的标题通过属性传递给菜单组件。

步骤五：在菜单组件中渲染数据

最后，我们需要在菜单组件中使用传递过来的数据来渲染菜单项。

// 定义一个菜单组件
Vue.component('menu-item', {
  props: ['title'], // 定义一个名为 title 的属性，用来接收传入的菜单标题
  template: `
    <li class="menu-item">
      {{ title }}
    </li>
  `,
});

在这个代码片段中，我们使用双大括号语法将传递过来的标题渲染到菜单项的模板中。