《工业互联网APP设计与开发》课件——12.侧边导航栏制作.pptxVIP

Ⅹ-12侧边导航栏制作

Ⅹ-12侧边导航栏制作掌握阿里云矢量图标库的引用及使用方法掌握Vue中computed、defineProps等方法使用掌握ElementPlus中el-scrollbar、el-menu、el-image等组件的使用掌握Vue中父子组件之间的通信掌握在Vue项目中使用JSX语法编写代码掌握Vue中slot插槽的使用编写注册表单

Ⅹ-12侧边导航栏制作编写注册表单Vue内置方法的使用；ElementPlus组件使用；Vue父子组件使用及通信；Vue中slot插槽的使用；JSX语法使用；项目页面切换；阿里云矢量图标库使用；

Ⅹ-12侧边导航栏制作你是一名web前端工程师，主管给您分配了新的工作任务，在构建的管理系统项目中为了确定当前的位置，通过将功能结构可视化的方法，实现侧边导航栏功能。侧边导航栏功能，需要您把在router文件中定义的路由一一展示，并添加路由跳转功能，选中和非选中的路由需要有颜色的区分。

Ⅹ-12侧边导航栏制作学习任务Ⅹ-12侧边导航栏制作学习任务Ⅹ-12-S1侧边导航栏配置学习任务Ⅹ-12-S2导航菜单制作

Ⅹ-12侧边导航栏制作学习任务Ⅹ-12-S1侧边导航栏配置任务要求：1.独立完成学习任务1的练习题，将完成的答案填到相应的空格处。2.我们将以小组工作的方式完成这个学习任务。3.能够独立完成侧边导航栏配置。

Ⅹ-12侧边导航栏制作学习任务Ⅹ-12-S1侧边导航栏配置学习成果展示：1.阅读并独立完成任务第1题。2.通过VisualStudioCode对HTML页面进行编程。3.以小组工作的方式，各小组形成统一答案。4.选出代表，进行展示讲解。5.共同讨论答案。

Ⅹ-12侧边导航栏制作学习任务Ⅹ-12-S1侧边导航栏配置1.填空题1）在Vue项目可以通过安装插件使项目支持JSX语法；2）填写项目中使用阿里云图表依赖的五个文件。①；②；③；④； ⑤；3）在icon.scss中添加下图代码的作用是。

Ⅹ-12侧边导航栏制作学习任务Ⅹ-12-S1侧边导航栏配置1.填空题1）在Vue项目可以通过安装@vitejs/plugin-vue插件使项目支持JSX语法；2）填写项目中使用阿里云图表依赖的五个文件。①iconfont.scss；②iconfont.js；③iconfont.ttf；④iconfont.woff； ⑤iconfont.woff2；3）在icon.scss中添加下图代码的作用是在组件中可以直接通过class=“图标名称”来显示图标。

Ⅹ-12侧边导航栏制作学习任务Ⅹ-12-S2导航菜单栏制作任务要求：1.独立完成学习任务2的练习题，将完成的答案填到相应的空格处。2.我们将以小组工作的方式完成这个学习任务。3.能够独立完成导航菜单栏制作。

Ⅹ-12侧边导航栏制作学习任务Ⅹ-12-S2导航菜单栏制作学习成果展示：1.阅读并独立完成任务第1、2题。2.通过VisualStudioCode对HTML页面进行编程。3.以小组工作的方式，各小组形成统一答案。4.选出代表，进行展示讲解。5.共同讨论答案。

Ⅹ-12侧边导航栏制作学习任务Ⅹ-12-S2导航菜单栏制作1.选择题，选择一个正确的答案，将相应字母填入题中括号内。1）下列指令中，不能实现条件判断的是？（）Av-ifBv-elseCv-showDv-bind2）下列指令中，可以对表单元素进行双向数据绑定的是？（）Av-modelBv-onCv-bind