您现在的位置是:首页 >学无止境 >Vue3-黑马(十一)网站首页学无止境

Vue3-黑马(十一)

dengfengling999 2024-06-17 10:19:54
简介Vue3-黑马(十一)

目录:

(1)vue3-router-布局和菜单

(2)vue3-进阶-router-图标二次封装-单文件组件

(3)vue3-进阶-router-图标的二次封装-函数式组件


(1)vue3-router-布局和菜单

主页做一个布局:

 

在主页A53组件中添加布局代码:

上中下布局:

 

 

上左右布局:

 

 

设置子路由显示位置:

 

 导航菜单:

 

每个菜单项要有唯一标识key、theme主题

 

 mode指定菜单的显示模式:下方显示

 

添加菜单跳转路径:router-link 

 

(2)vue3-进阶-router-图标二次封装-单文件组件

 

菜单项加这个图标 

安装图标依赖:

 

 

 

 

 

 

 

 

 

对图标进行封装:

 使用新建的一个组件标签进行替换

 导入直接导入这个定义的组件就行了

 

这样做比较麻烦

 (3)vue3-进阶-router-图标的二次封装-函数式组件

单文件组件以.vue结尾的组件,分成了三部分script代码部分,html标签部分,style样式部分

template部分不够灵活,vue还支持函数式组件文件以.ts结尾

里面全是代码:

定义Hello箭头函数,并导出,使用h函数生成html代码:

 

 

在主页组件导入:函数式组件不用加扩展名

 

 

 

 

 

 

 单文件组件免不了加大量的if-else的判断,当用到这样的场景需要动态生成不同的标签时可以用函数式组件

 

 

 

风语者!平时喜欢研究各种技术,目前在从事后端开发工作,热爱生活、热爱工作。