当前课程知识点：软件开发实训--动态网站开发 > 14 网站前端组件实现 > 14.2菜单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.3随堂测试
-1.2网站需求分析
--1.2.4随堂测试
-1.3网站首页分析
--1.3.3随堂测试
-1.4导航菜单分析
--1.4.3随堂测试
-1.5内容区域分析
--1.5.3随堂测试
-1.6内容副页面分析
-1.7编写需求文档
-2.1后端页面总体分析
--2.1.3随堂测试
-2.2用户管理功能设计
--2.2.3随堂测试
-2.3内容与分类功能分析
--2.3.3随堂测试
-2.4网站配置功能设计
--2.4.4随堂测试
-2.5数据库及表结构分析
-总体设计文档
-3.1前台模板约定
--3.1.3随堂测试
-3.2网站配置接口设计
--3.2.3随堂测试
-3.3菜单接口设计
--3.3.3随堂测试
-3.4内容接口设计
--3.4.3随堂测试
-3.5幻灯片接口设计
--3.5.3随堂测试
-补充设计文档
-4.1用户管理功能设计
--4.1.3随堂测试
-4.2菜单管理功能设计
--4.2.3随堂测试
-4.3内容管理功能设计
--4.3.3随堂测试
-4.4网站配置信息设计
--4.4.3随堂测试
-完成设计文档
-4.6随堂测试
-5.1开发环境搭建
--5.1.2随堂测试
-5.2Web前端环境搭建
-5.3创建用户实体
--5.3.2随堂测试
-5.4用户实体表创建与初始化
--5.4.2随堂测试
-5.5用户数据访问接口实现
--5.5.2随堂测试
-5.6环境搭建问题
-6.1用户服务层接口实现
--6.1.2随堂测试
-6.2用户列表和编辑控制器实现
--6.2.2随堂测试
-6.3用户存储和删除控制器实现
-6.4用户添加、编辑界面实现
-6.5用户管理添加用户调试
-7.1用户查询模板实现
--7.1.2随堂测试
-7.2用户信息编辑的实现
-7.3单个用户删除实现
-7.4多个用户删除实现
-8.1用户列表分页基本实现
-8.2用户列表查询结果分页实现
-8.3通用日期处理
-8.4整型日期处理
--8.4.2随堂测试
-8.5枚举数据的应用
-9.1登录逻辑实现
--9.1.2随堂测试
-9.2登录界面及流程调试
--9.2.2随堂测试
-9.3管理主界面实现
--9.3.2随堂测试
-9.4授权验证拦截器实现
--9.4.2随堂测试
-9.5拦截器调试
-10.1分类接口实现
-10.2分类添加、编辑实现
-10.3分类树结构实现
-10.4分类删除实现
--10.4.2随堂测试
-11.1内容实体定义
-11.2相关接口定义
-11.3服务接口实现
-11.4内容添加、编辑模板实现
-11.5内容添加、编辑控制器实现
-11.6内容检索页面实现
-11.7内容分类树实现
-12.1修改UEditor相关问题
-12.2整合UEditor到内容编辑界面
-12.3UEditor图片对话框应用
-12.4文件上传问题处理
-13.1网站配置相关类实现
-13.2网站配置界面模板实现
-13.3网站配置调试
-14.1网站首页布局实现
-14.2菜单Vue组件实现
--14.2.2随堂测试
-14.3幻灯片Vue组件实现
-14.4滚动Vue组件实现
--14.4.2随堂测试
-14.5滚动接口实现
-14.6滚动接口调试
-14.7幻灯片接口实现
-15.1首页区域实现
-15.2首页内容脚本实现
-15.3首页完善
-15.4Vue组件放入单文件
-15.5详细页面实现
-16.1网站测试介绍
-16.2功能测试
-16.3打包发布
-16.4部署运行
--16.4.2随堂测试
