当前课程知识点:软件开发实训--动态网站开发 >  14 网站前端组件实现 >  14.2菜单Vue组件实现 >  14.2.1菜单Vue组件实现

返回《软件开发实训--动态网站开发》慕课在线视频课程列表

14.2.1菜单Vue组件实现在线视频

下一节:14.3.1幻灯片Vue组件实现

返回《软件开发实训--动态网站开发》慕课在线视频列表

14.2.1菜单Vue组件实现课程教案、知识点、字幕

同学你好

欢迎回到软件开发实训课堂

上节课咱们讲了index页面的基本布局

用四行来布局index页面

那么这节课咱们来看一下菜单组件该如何实现

我们的菜单组件使用

Bootstrap

模板和VOGS的组件来实现

首先我们定义Bootstrap的模板

把模板放在script的标签里

模板的script标签类型

用x-template

或者template

都可以

给它一个ID

以方便我们把

menu组件与模板绑定起来

menutemplate

我们的菜单

然后

我们不需要去

写它的模板的html代码

直接从它的网站来获取

我们进入它的导航页面

将它的

html代码复制过来

然后粘到我们的

script标签中间

现在我们可以对它进行修改

首先我们可以

看一下它的

整体是一个nav标签

在nav标签下面

它有一个A标签来显示

这个网站的

商标

或者说logo

这里我们不需要logo

所以可以把它去掉

而这个按钮是当你用

手机这样的小屏幕进行浏览时

所有的菜单内容会隐藏掉

然后点击这个按钮才会出现

在下面DIV是菜单

它的整个的面板

而菜单面板里面

有一个UL标签

和一个form标签

将菜单分成了两个部分

第一个部分是

超链接或者有下拉菜单的内容

最后一个表单是给出了一个搜索的表单

那么这里我们没有搜索

只有一个中文版的按钮

好 我们来看

怎么把它改成menu的模板

那么这里面它的样式类我们可以不动

在这里

它的样式类有一个bg-light

这是背景颜色

我们可以把它去掉

不要它的背景颜色

然后我们来

绑定它的ID

注意了

ID会被多个属性使用

所以我们把它都拿出来看一下

第一个是data-target

我们绑定ID

给它前面加上冒号

这是为menu-banner的指令的缩写

注意看

它的值是由一个常量加上我们的属性ID

然后

再将属性

它依然是ID给它绑定上

其他的属性不变

再往下看

这个ID我们需要绑定

下面的内容

是具体的菜单

而它的菜单项

是nav-iten

active是当前

被点击的菜单

我们可以看一下

用这个我们来写他具体的循环

我们的数据定义为menus

我们要用到它的索引

所以给它一个索引

绑定超链接的地址

超链接地址是m.href

显示的内容

是菜单的名称

m.name

这样每一个就有了

然后菜单呢

它前面有一个小箭头

我们把这个

值给成

top images下面的

top.arr.gf

这是个小箭头

给它中间

加一个空格

这个 是html的

转义字符 它就是在网页上展示的是一个空格

这样我们的图片也就有了

对于当前

标志

加iten类

我们可以用

class绑定来加它

说如果idx等于0的话

就加上iten

否则的话不需要加

这是

菜单

我们来看一下

还有什么其他需要绑定的

把上面多余的删掉

对我们参考的网站产品

菜单它具有下拉的菜单项

所以我们需要用到下面这一个部分

那么我们可以把它

根据它是否有子菜单来实现

这里对循环menu

我们来对子菜单进行判断

我们可以把这个整体给它括起来

然后加上后面的内容

如果说有子菜单

那么就是

用圆括号括起来

m.sublists

sublists

是后台传给我们的属性

子菜单

如果它的长度是大于零的

我们就给它输出

dropdown

注意加一个空格和前面的内容隔开

包括active也要加一个空格

如果没有子菜单就不用输出

这是

它样式的添加

再下面是

菜单的链接

它的样式添加

那么这里边我们可以绑定

同样的

class

绑定当

sublists.length也就是有

子菜单大于零

它的长度大于零

我们就加上dropdown-toggle

否则的话就不用加

那么当点击时

它还有一个ID是

菜单对应的内容

我们让子菜单可以对应到ID上来

所以我们还需要给它绑定ID

ID绑定我们可以和

菜单的相关序号进行对应

所以我们这里可以写

navbardropdown_id

加上它的索引

这样它的ID就有了

我们把

换行

加上role

等于button

这个其实可以不需要

没有关系

但是如果说它有下拉功能

后边的date-toggle是需要的

dropdown

这个是需要的

那么我们可以让它显示

也可以不让它显示

下面咱们看一下下拉菜单的实现

下拉菜单

我们先写一个容器DIV

给它样式

名字叫dropdown-menu

然后我们需要去判断它是否

可以显示

那么它显示的条件是

由子菜单

子菜单的长度

大于零就行了

只要有子菜单

我们就显示子菜单项

dropdown-iten

对这个项进行循环

循环时我们绑定它的链接地址

然后用差值显示菜单名称

这样我们把下拉菜单就做好了

后边

这些内容就不需要了

最后我们来写

按钮

再参考网站的菜单的

最右方有一个中文版的按钮

我们可以给它写在这里

中文版它是一个图片

所以我们可以用图片

images/anniu.gif

然后让它的左边缘

距离菜单

前面的菜单远一些

这样我们就将模板写好了

下面我们使用

Vue来定义组件

关联这个模板

Vue.component定义组件

组件的名称我们用驼峰格式编写

它的选项

首先

定义一个props

props里边定义的是

我们在html写标签时

使用的这个

标签的属性

第一个是ID

第二个是menus我们需要的数据

然后我们写对应的模板

menutemplate

一定要把

模板后边的ID与上面的

script标签的ID对应起来

这样我们就写好了

模板

并且定义好了我们的组件

那么如何来使用

只要找到我们对应的跟标签

vueroot

在它里边去使用就可以了

那么我们找到

然后在菜单区域把它写出来

这里

我们首先给出

它的ID是mainmenu

然后绑定数据menus

绑定完成后

我们再根组件里有一条数据

正好是menus

我们来看一下

我们刷新界面

看一下菜单已经出现了

对于菜单的数据

可以看一下

它首先是一个数组

然后数组中

每一个元素是一个对象

而这个对象中

必须要包括name

菜单名称

链接的地址以及子菜单

所有的元素

都以这种形式给出

我们就可以

通过这个组件来生成我们需要的菜单

我们把已经准备好的数据复制过来

站在上面

把它往后移

对应整齐

有了数据

我们再次刷新界面

这样我们的菜单就出现了

有关菜单组件的实现

我们就讲到这里

下节课我们再见

软件开发实训--动态网站开发课程列表:

1 前端需求分析

-1.1课程介绍

--1.1.1课程介绍

--1.1.2课程介绍PPT

--1.1.3随堂测试

-1.2网站需求分析

--1.2.2网站需求分析

--1.2.3需求PPT

--1.2.4随堂测试

-1.3网站首页分析

--1.3.1网站首页分析

--1.3.2首页分析PPT

--1.3.3随堂测试

-1.4导航菜单分析

--1.4.1导航菜单分析

--1.4.2课程PPT

--1.4.3随堂测试

-1.5内容区域分析

--1.5.1内容区域分析

--1.5.2课程PPT

--1.5.3随堂测试

-1.6内容副页面分析

--1.6.1副页面分析

--1.6.2课程PPT

--1.6.3软件系统需求分析

-1.7编写需求文档

-1.8需求分析理解

2 后端分析

-2.1后端页面总体分析

--2.1.1后端页面总体设计

--2.1.2课程PPT

--2.1.3随堂测试

-2.2用户管理功能设计

--2.2.1用户管理功能分析

--2.2.2课程PPT

--2.2.3随堂测试

-2.3内容与分类功能分析

--2.3.1内容与分类功能分析

--2.3.2课程PPT

--2.3.3随堂测试

-2.4网站配置功能设计

--2.4.1网站配置功能设计

--2.4.2课程PPT

--2.4.3软件系统设计

--2.4.4随堂测试

-2.5数据库及表结构分析

--2.5.1数据库及表结构分析

--2.5.2课程PPT

--2.5.3数据库设计

-总体设计文档

3 接口设计

-3.1前台模板约定

--3.1.1前台模板约定

--3.1.2课程PPT

--3.1.3随堂测试

-3.2网站配置接口设计

--3.2.1网站配置接口设计

--3.2.2课程PPT

--3.2.3随堂测试

-3.3菜单接口设计

--3.3.1菜单接口设计

--3.3.2课程PPT

--3.3.3随堂测试

-3.4内容接口设计

--3.4.1内容接口设计

--3.4.2课程PPT

--3.4.3随堂测试

-3.5幻灯片接口设计

--3.5.1幻灯片接口设计

--3.5.2课程PPT

--3.5.3随堂测试

-补充设计文档

-3.7接口设计

4 功能设计

-4.1用户管理功能设计

--4.1.1用户管理功能设计

--4.1.2课程PPT

--4.1.3随堂测试

-4.2菜单管理功能设计

--4.2.1菜单管理功能设计

--4.2.2课程PPT

--4.2.3随堂测试

-4.3内容管理功能设计

--4.3.1内容管理功能设计

--4.3.2课程PPT

--4.3.3随堂测试

-4.4网站配置信息设计

--4.4.1网站配置信息设计

--4.4.2课程PPT

--4.4.3随堂测试

-完成设计文档

-4.6随堂测试

5 环境搭建与开发

-5.1开发环境搭建

--5.1.1环境搭建

--5.1.2随堂测试

-5.2Web前端环境搭建

--5.2.1Web前端环境

-5.3创建用户实体

--5.3.1用户实体创建

--5.3.2随堂测试

-5.4用户实体表创建与初始化

--5.4.1用户实体表创建与初始化

--5.4.2随堂测试

-5.5用户数据访问接口实现

--5.5.1用户数据访问接口实现

--5.5.2随堂测试

-5.6环境搭建问题

-5.7环境搭建问题

6 用户管理功能实现

-6.1用户服务层接口实现

--6.1.1用户服务层接口实现

--6.1.2随堂测试

-6.2用户列表和编辑控制器实现

--6.2.1用户列表和编辑控制器实现

--6.2.2随堂测试

-6.3用户存储和删除控制器实现

--6.3.1用户存储和删除控制器实现

-6.4用户添加、编辑界面实现

--6.4.1用户添加、编辑界面实现

-6.5用户管理添加用户调试

--6.5.1用户管理添加用户调试

-6.6开发

7 用户管理功能实现二

-7.1用户查询模板实现

--7.1.1用户查询模板实现

--7.1.2随堂测试

-7.2用户信息编辑的实现

--7.2.1用户信息编辑的实现

-7.3单个用户删除实现

--7.3.2单个用户删除实现

-7.4多个用户删除实现

--7.4.1多个用户删除实现

8 用户管理功能实现三

-8.1用户列表分页基本实现

--8.1.1用户列表分页基本实现

-8.2用户列表查询结果分页实现

--8.2.1用户列表查询结果分页实现

-8.3通用日期处理

--8.3.1通用日期处理

-8.4整型日期处理

--8.4.1整型日期处理

--8.4.2随堂测试

-8.5枚举数据的应用

--8.5.1枚举数据的应用

--8.5.2Spring Boot开发

9 后台主界面实现

-9.1登录逻辑实现

--9.1.1登录逻辑实现

--9.1.2随堂测试

-9.2登录界面及流程调试

--9.2.1登录界面及流程调试

--9.2.2随堂测试

-9.3管理主界面实现

--9.3.1管理主界面实现

--9.3.2随堂测试

-9.4授权验证拦截器实现

--9.4.1授权验证拦截器实现

--9.4.2随堂测试

-9.5拦截器调试

--9.5.1拦截器调试

10 分类管理实现

-10.1分类接口实现

--10.1.1分类接口实现

-10.2分类添加、编辑实现

--10.2.1分类添加、编辑实现

-10.3分类树结构实现

--10.3.1分类树结构实现

-10.4分类删除实现

--10.4.1分类删除实现

--10.4.2随堂测试

11 内容管理实现

-11.1内容实体定义

--11.1.1内容实体定义

-11.2相关接口定义

--11.2.1相关接口定义

-11.3服务接口实现

--11.3.1服务接口实现

-11.4内容添加、编辑模板实现

--11.4.1内容添加、编辑模板实现

-11.5内容添加、编辑控制器实现

--11.5.1内容添加、编辑控制器实现

-11.6内容检索页面实现

--11.6.1内容检索页面实现

-11.7内容分类树实现

--11.7.1内容分类树实现

12 UEditor富文本编辑器

-12.1修改UEditor相关问题

--12.1.1修改UEditor相关问题

-12.2整合UEditor到内容编辑界面

--12.2.1整合UEditor到内容编辑界面

-12.3UEditor图片对话框应用

--12.3.1UEditor图片对话框应用

-12.4文件上传问题处理

--12.4.1文件上传问题处理

13 网站配置管理实现

-13.1网站配置相关类实现

--13.1.1网站配置相关类实现

-13.2网站配置界面模板实现

--13.2.1网站配置界面模板实现

-13.3网站配置调试

--13.3.1网站配置调试

14 网站前端组件实现

-14.1网站首页布局实现

--14.1.1网站首页布局实现

-14.2菜单Vue组件实现

--14.2.1菜单Vue组件实现

--14.2.2随堂测试

-14.3幻灯片Vue组件实现

--14.3.1幻灯片Vue组件实现

-14.4滚动Vue组件实现

--14.4.1滚动Vue组件实现

--14.4.2随堂测试

-14.5滚动接口实现

--14.5.1滚动接口实现

-14.6滚动接口调试

--14.6.1滚动接口调试

-14.7幻灯片接口实现

--14.7.1幻灯片接口实现

15 网站前端页面实现

-15.1首页区域实现

--15.1.1首页区域实现

-15.2首页内容脚本实现

--15.2.1首页内容脚本实现

-15.3首页完善

--15.3.1首页完善

-15.4Vue组件放入单文件

--15.4.1Vue组件放入单文件

-15.5详细页面实现

--15.5.1详细页面实现

-15.6前端问题

16 测试与发布

-16.1网站测试介绍

--16.1.1网站测试介绍

--16.1.2课程PPT

-16.2功能测试

--16.2.1功能测试

--16.2.2课程PPT

-16.3打包发布

--16.3.1打包发布

-16.4部署运行

--16.4.1部署运行

--16.4.2随堂测试

14.2.1菜单Vue组件实现笔记与讨论

也许你还感兴趣的课程:

© 柠檬大学-慕课导航 课程版权归原始院校所有,
本网站仅通过互联网进行慕课课程索引,不提供在线课程学习和视频,请同学们点击报名到课程提供网站进行学习。