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

动态数据绑定(五)

困难

人数108人在学习该课程,有84人已经完成该课程

时间平均用时0.9

关键词Vue

课程概述

作业提交截止时间:04-24

任务目的

  • 综合应用本系列的所有知识点

任务描述

这是“动态数据绑定”的最后一题了,希望你能坚持到最后。在第四题的基础上,我们考虑如何做到:"当数据发生改变时,重新渲染 DOM。" 此目标又可以分为两层难度。

  1. 相对简单的目标:数据任意部分发生了变化,都重新渲染 DOM。
  2. 相对困难的目标:数据的某一部分发生了变动,只重新渲染对应这部分数据的 DOM。

举个例子。

let app = new Vue({
  el: '#app',
  data: {
    user: {
      name: 'youngwind',
      age: 25
    },
    school: 'bupt',
    major: 'computer'
  }
});
<!-- 页面中原本的 html 模板片段 -->
<div id="app">
    <p>姓名:{{user.name}}</p>
    <p>年龄:{{user.age}}</p>
</div>

相对简单的目标是说:无论是修改数据的哪一部分(包括没有在页面中出现的 school 和 major 这两部分),DOM 都会重新渲染。(即便前后渲染结果一致)
相对困难的目标是说:只有当 user.name 和 user.age 发生改变的时候,DOM 才会重新渲染;而 school 和 major 的变化不会引发重新渲染。

最后,无论你选择哪种难度,能完成本题,就已经很棒了!

如果你想了解更多这个系列的后续,可以访问我的博客。同时也欢迎通过邮件与我联系,进行更多的交流。

任务注意事项

  1. 不能使用任何第三方的库
  2. 程序执行环境为浏览器

在线学习参考资料

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

暂无优秀学习笔记~