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

Ⅹ-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:clickC

v-on:mouseenterDv-on:doubleclick2）下列选项中能够监听状态变化的参数是？

（）A

filtersB

watchC

computedDcomponents3）v-for指令需要为每一项提供一个唯一（

）属性AkeyBvalueCobjectDindex4）关于Flex布局主轴描述错误的是？（）A

Flex布局默认的主轴是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.选择题，选择一个正确的答案，将相应字母填入题中括号内。1）下面选项中能够实现页面单击事件绑定的代码是？（

B）Av-on:enterBv-on:clickC

v-on:mouseenterDv-on:doubleclick2）下列选项中能够监听状态变化的参数是？

（B）A

filtersB

watchC

computedDcomponents3）v-for指令需要为每一项提供一个唯一（A

）属性AkeyBvalueCobjectDindex4）关于Flex布局主轴描述错误的是？（D）A

Flex布局默认的主轴是X轴Bflex-direction取值为row，可以将主轴设置为X轴Cflex-direction取值为column，可以将主轴设置为Y轴Dflex-direction默认取值是columnⅩ-13顶部导航栏制作学习任务Ⅹ-13-S2导航栏制作1.选择题，选择一个正确的答案，将相应字母填入题中括号内。5）关于Vuex说法错误的是（

C

）Aactions通过commit触发mutations中的方法进行状态更新Bmutation中的方法按照规定最好不要涉及异步方法Cajax一般放在mutations中，把获取到的数据存储到state中DVuex的状态存储是响应式的7）运行下面代码，页面中输出的结果是（C）A

一等B

二等C三等D四等Ⅹ-13顶部导航栏制作学习任务Ⅹ-13-S2导航栏制作学习成果展示：1.阅读并独立完成任务第2、3题。2.通过VisualStudioCode对HTML页面进行编程。3.以小组工作的方式，各小组形成统一答案。4.选出代表，进行展示讲解。5.共同讨论答案。Ⅹ-13顶部导航栏制作学习任务Ⅹ-13-S2导航栏制作2.填空题。1）更改Vuex的store中的状态的唯一方法是提交

mutations

；2）在Vue组件内通过

defineEmits

实现子组件向父组件的事件传递；3）在页面中通过CSS中

transform

属性，实现元素的旋转、缩放、移动等操作；4）在Vuex中user模块内定义了name属性，在组件内可以通过

获取name属性的值；5）在CSS中给元素设置

cursor:pointer

属性实现鼠标经过或点击有小手样式；6）在Vue组件内通过设置

transition

标签实现元素组件的过渡和动画效果；3.判断题。1）子组件向父组件传值，通过defineEmits触发父组件的自定义事件进行传值（正确）；2）在使用flex布局中设置justify-content:space-between可以使容器内元素两端对齐（正确）；Ⅹ-13顶部导航栏制作学习任务Ⅹ-13-S2导航栏制作学习成果展示：1.阅读并独立完成任务第4题。2.通过VisualStudioCode对HTML页面进行编程。3.以小组工作的方式，各小组形成统一答案。4.选出代表，进行展示讲解。5.共同讨论答案。Ⅹ-13顶部导航栏制作学习任务Ⅹ-13-S2导航栏制作4.根据提示完成下面代码补充。1）在Vue组件内可以通过route.path来获取当前路由信息，可以通过watch来完成数据监听，可以通过console.log()完成数据打印

①监听页面路由变化，并把打印当前路由信息Ⅹ-13顶部导航栏制作学习任务Ⅹ-13-S2导航栏制作4.根据提示完成下面代码补充。1）在Vue组件内可以通过route.path来获取当前路由信息，可以通过watch来完成数据监听，可以通过console.log()完成数据打印

①监听页面路由变化，并把打印当前路由信息顶部导航栏制作请各小组讨论，根据项目任务需求，制定项目实施流程图，并将小组讨论最终结果进行案例展示。根据上述所学，完成注册表单设计，并使用CSS对注册表单进行美化。限时20min将小组讨论结果誊写到工作页中，注意要铅笔（流程图要横平竖直）限时10min顶部导航栏制作根据项目实施流程图，有些步骤内容等内容需要进行实现方式确认，请每组进行站立会议，根据计划对项目步骤流程进行细化，根据步骤设计实现方式,填写工作页中《站立决策卡》。限时30min顶部导航栏制作根据计划及决策内容，对项目进行实施，填写实施步骤，对实施步骤的结果进行选择是否实现，并根据自身情况填写工作页《项目实施卡》。限时120min顶部导航栏制作页面检查完成开发工作后，使用浏览器打开HTML文件，请根据页面检查表，对各自页面进行目检，将检查结果填入表中序号检查内容检查结果附注1页面内容是否缺失是〇

否〇

2页面内布局是否合理是〇

否〇

3页面是否符合任务需求是〇