《工业互联网APP设计与开发》课件——13.顶部导航栏制作.pptxVIP

Ⅹ-13顶部导航栏制作

Ⅹ-13顶部导航栏制作掌握Vue中defineEmits等方法使用掌握ElementPlus中el-dropdown、el-breadcrumb等组件的使用掌握面包屑导航功能的实现掌握Vue中父子组件之间的通信编写注册表单

Ⅹ-13顶部导航栏制作编写注册表单侧边导航栏缩放；面包屑导航实现；下拉菜单实现；退出登录功能实现；

Ⅹ-13顶部导航栏制作您是一名web前端工程师，主管给您分配了新的任务，需要您在管理系统中实现顶部导航栏功能，导航栏中需要显示当前页面的名称，显示头像和退出登录功能，还可以实现对侧边导航栏的折叠功能。

Ⅹ-13顶部导航栏制作学习任务Ⅹ-13顶部导航栏制作学习任务Ⅹ-13-S1顶部导航栏配置学习任务Ⅹ-13-S2导航栏制作

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

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

Ⅹ-13顶部导航栏制作学习任务Ⅹ-13-S1顶部导航栏配置1.填空题1）在项目中创建文件存放全局变量信息，在组件中使用调用，通过settings.”变量名”获取定义的值；2.根据说明，补充以下代码。1）在Vuex模块中，定义count属性为0，定义addCount方法，每次触发该方法修改count属性的值+1。

Ⅹ-13顶部导航栏制作学习任务Ⅹ-13-S1顶部导航栏配置1.填空题1）在项目中创建settings.js文件存放全局变量信息，在组件中使用importsettingsfrom“@/settings”调用，通过settings.”变量名”获取定义的值；2.根据说明，补充以下代码。1）在Vuex模块中，定义count属性为0，定义addCount方法，每次触发该方法修改count属性的值自增+1。

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

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

Ⅹ-13顶部导航栏制作学习任务Ⅹ-13-S2导航栏制作1.选择题，选择一个正确的答案，将相应字母填入题中括号内。1）下面选项中能够实现页面单击事件绑定的代码是？（）Av-on:enterBv-on:clickCv-on:mouseenterDv-on:doubleclick2）下列选项中能够监听状态变化的参数是？（）AfiltersBwatchCcomputedDcomponents3）v-for指令需要为每一项提供一个唯一（）属性AkeyBvalueCobjectDindex4）关于Flex布局主轴描述错误的是？（）AFlex布局默认的主轴是X轴Bflex-direction取值为row，可以将主轴设置为X轴Cflex-direction取值为column，可以将主轴设置为Y轴Dflex-direction默认取值是column

Ⅹ-13顶部导航栏制作学习任务Ⅹ-13-S2导航栏制作1.选择题，选择一个正确的答案，将相应字母填入题中括号内。5）关于Vuex说法错误的是（）Aactions通过commit触发mutations中的方法进行状态更新Bmutation中的方法按照规定最好不要涉及异步方法Cdatas[item]Ddatas[index]7）运行下面代码，页面中输出的结果是（）A一等B二等C三等D四等

Ⅹ-13顶部导航栏制作学习任务Ⅹ-13-S2导航栏制作1.选择题，选择一个正确的答案，将相应字母填入题中括号