百度前端技术学院是一个为大学生创办的免费的前端技术实践、分享、交流平台。由百度校园招聘组、百度校园品牌部、百度前端技术部以及多个百度的前端团队联合创办。学院组织了一批百度在职工程师,精心编写了数十个实践编码任务,将技术知识点系统有机地串联在各个充满趣味与挑战的任务中,同学们通过实际地编码练习来掌握知识,再辅以互相评价、学习笔记等方式,加深对于学习内容的理解。在过去的三年中,百度前端技术学院累积吸引了上万名同学参加,并且有数十名同学在学习后,顺利加入了百度,成为了百度的前端工程师。

2.6 插槽相关

普通

人数52人在学习该课程,有29人已经完成该课程

时间平均用时0.7

课程概述

作业提交截止时间:09-01

插槽相关

任务目的

熟悉 SAN 及 插槽的使用

任务描述

  • 示例图 中所示 一个任务栏中有多个任务卡片使用「插槽」方式实现其效果,
    该效果可能有多种更好更简单直观的方式实现,但此处需要用「插槽」方式来实现,练习 SAN 中插槽的使用以及提高组件灵活性;
  • 要求
    • 「任务栏」 大标题需要支持:既可直接参数定义 又可简单的命名定义
      // 形如
      <task-menu>
          <div slot="title"><p>test</p> {{test}} <p>test</p></div>
      </task-menu>
      // 和
      <task-menu title="{{test}}"></task-menu>
      
  • 具体任务卡片部分
    • 卡片任务说明标题 任务一、二、三... 正常显示 可不做特殊处理
    • 卡片任务说明具体内容 标题、内容、时间
      • 使用 「scoped 插槽」 能让在渲染过程 使用组件内部数据
      • 使用插槽的「动态命名」 调用方可进行灵活处理,如:对 标题 进行加粗处理

任务注意事项

  • 要求功能实现与任务描述中完全一致
  • 示例图仅为参考,样式不需要完全实现一致
  • 实现中,尽可能考虑代码的可读性和可复用性
  • 请注意代码风格的整齐、优雅
  • 代码中含有必要的注释

在线学习参考资料

学员提交的作业 (-)
学员名称提交时间提交的代码预览效果评价数平均得分操作
课程优秀学习笔记

暂无优秀学习笔记~