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

Ⅹ-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）下列指令中，可以对表单元素进行双向数据绑定的是？

（）A

v-modelB

v-onC

v-bindDv-show3）下列选项中，关于computed属性说法错误的是（

）A支持缓存，只有依赖数据发生改变，才会重新进行计算B

每次使用计算属性都会触发回调函数的重新计算Ccomputed中的函数必须用return返回Dcomputed内部的函数在调用时不需要加()4）下列CSS选择器优先级最高的是？（）A#idB.classNameC!importantDstyle=””Ⅹ-12侧边导航栏制作学习任务Ⅹ-12-S2导航菜单栏制作1.选择题，选择一个正确的答案，将相应字母填入题中括号内。5）v-for="(item,index)indatas",该循环中表示数组下标的是（

）AitemBindexCdatas[item]Ddatas[index]6）下列选项中用来接受父组件传值的方法是？

（）A

propsB

definePropsC

defineEmitsDemit7）动态组件经常使用在路由控制或选项卡切换中，通过使用<component>元素，动态绑定到它的（

）属性AnameB

srcCisDslot8）在Vue中，<slot>标签是组件内部的？（）A

对象BHTML元素C属性D占位符Ⅹ-12侧边导航栏制作学习任务Ⅹ-12-S2导航菜单栏制作1.选择题，选择一个正确的答案，将相应字母填入题中括号内。9）在组件内实现路由切换需要使用（

）组件A<component>B<template>C<router-link>D<router-view>10）插槽（Slot）主要是在Vue的（

）中使用A

兄弟组件中B

父子组件中C

任意选项中D以上说法都错误Ⅹ-12侧边导航栏制作学习任务Ⅹ-12-S2导航菜单栏制作2.填空题。1）filter()是用于过滤数组的方法，返回新数组，原数组

；2）填写下面Elementplus库中el-menu菜单组件内各属性的作用。default-active：

；collapse：

；

collapse-transition：

；background-color：

；

text-color：

；active-text-color：

；

3.判断题。1）在项目中可以通过useRoute()函数中的push方法来实现页面跳转（）；2）defineProps声明的props的值是只读的，不能修改（）；3）在组件内使用defineProps，必须要先进行导入才可以使用（）；Ⅹ-12侧边导航栏制作学习任务Ⅹ-12-S2导航菜单栏制作1.选择题，选择一个正确的答案，将相应字母填入题中括号内。1）下列指令中，不能实现条件判断的是？（

D）Av-ifBv-elseCv-showDv-bind2）下列指令中，可以对表单元素进行双向数据绑定的是？

（C）A

v-modelB

v-onC

v-bindDv-show3）下列选项中，关于computed属性说法错误的是（

B

）A支持缓存，只有依赖数据发生改变，才会重新进行计算B

每次使用计算属性都会触发回调函数的重新计算Ccomputed中的函数必须用return返回Dcomputed内部的函数在调用时不需要加()4）下列CSS选择器优先级最高的是？（C）A#idB.classNameC!importantDstyle=””Ⅹ-12侧边导航栏制作学习任务Ⅹ-12-S2导航菜单栏制作1.选择题，选择一个正确的答案，将相应字母填入题中括号内。5）v-for="(item,index)indatas",该循环中表示数组下标的是（

B）AitemBindexCdatas[item]Ddatas[index]6）下列选项中用来接受父组件传值的方法是？

（B）A

propsB

definePropsC

defineEmitsDemit7）动态组件经常使用在路由控制或选项卡切换中，通过使用<component>元素，动态绑定到它的（C

）属性AnameB

srcCisDslot8）在Vue中，<slot>标签是组件内部的？（D）A

对象BHTML元素C属性D占位符Ⅹ-12侧边导航栏制作学习任务Ⅹ-12-S2导航菜单栏制作1.选择题，选择一个正确的答案，将相应字母填入题中括号内。9）在组件内实现路由切换需要使用（C

）组件A<component>B<template>C<router-link>D<router-view>10）插槽（Slot）主要是在Vue的（B

）中使用A

兄弟组件中B

父子组件中C

任意选项中D以上说法都错误Ⅹ-12侧边导航栏制作学习任务Ⅹ-12-S2导航菜单栏制作2.填空题。1）filter()是用于过滤数组的方法，返回新数组，原数组

不改变

；2）填写下面Elementplus库中el-menu菜单组件内各属性的作用。default-active：

默认激活菜单的index

；collapse：

是否水平折叠收起菜单

；

collapse-transition：

是否开启折叠动画

；background-color：

菜单的背景色

；

text-color：

菜单的文字颜色

；active-text-color：

当前激活菜单的文字颜色

；

3.判断题。1）在项目中可以通过useRoute()函数中的push方法来实现页面跳转（错误）；2）defineProps声明的props的值是只读的，不能修改（正确）；3）在组件内使用defineProps，必须要先进行导入才可以使用（错误）；侧边导航栏制作请各小组讨论，根据项目任务需求，制定项目实施流程图，并将小组讨论最终结果进行案例展示。根