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

梁少峰

糯米运营平台研发部前端工程师,公众号“前端早读课”专栏作者,知乎专栏“Vue源码学习”作者。 著有个人博客:https://github.com/youngwind/blog (star 300+) 热衷在造轮子中学习,比如MVVM框架、基于vue的UI组件库、模块加载器等等。熟练掌握Vue、React等框架,在移动H5和后端方面也有所涉猎。

共发布 5个任务,已经有 1803名学生在这里学习上课
课程结束

难度:进阶时间:大约需要1

1008人在学习该课程,有383人已经完成该课程

动态数据绑定(一)

任务目的 了解 getter 和 setter 了解 new 任务描述 这是“动态数据绑定”系列的第一题。 我之前经常使用 Vue,后来不满足于仅仅使用它,我想了解其内部实现原理,所以就尝试学习其源码,获益匪浅。所以,如果你跟我一样,希望挑战这高难度的事情,那就开启这一系列吧! 我们从最简单的开始。 其中,动态数据绑定就是 Vue 最为基础,最为有用的一个功能。这个系列将分成5部分,一步一步来理解和实现这一功能。 ok,我们从最简单的开始。给定任意一个对象,如何监听其属性的读取与变化?也就是说,如何知道程序访问了对象的哪个属性,又改变了哪个属性? 举个例子。 let app1 = new …

课程结束

难度:进阶时间:大约需要4

336人在学习该课程,有260人已经完成该课程

动态数据绑定(二)

任务目的 在实践中使用递归思想 了解设计模式中的“发布-订阅模式” 任务描述 这是“动态数据绑定”系列的第二题。在第一题的基础上,我们继续考虑以下难点: 如果传入参数对象是一个“比较深”的对象(也就是其属性值也可能是对象),那该怎么办呢?举个例子。// 一个“比较深”的对象:某些属性的值也是一个对象 let obj = { a: 1, b: 2, c: { d: 3, e: 4 } } 如果设置新的值是一个对象的话,新设置的对象的属性是否能能继续响应 getter 和 setter。举个例子。 let app1 = new Observer({ …

课程结束

难度:困难时间:大约需要4

212人在学习该课程,有159人已经完成该课程

动态数据绑定(三)

任务目的 了解事件传播机制 任务描述 这是“动态数据绑定”的第三题。在第二题的基础上,我们再多考虑一个问题:"深层次数据变化如何逐层往上传播"。举个例子。 let app2 = new Observer({ name: { firstName: 'shaofeng', lastName: 'liang' }, age: 25 }); app2.$watch('name', function (newName) { console.log('我的姓名发生了变化,可能是姓氏变了,也可能是名字变了。') });…

课程结束

难度:困难时间:大约需要5

139人在学习该课程,有111人已经完成该课程

动态数据绑定(四)

任务目的 熟练使用原生 JS对操作 DOM 结构 任务描述 这是“动态数据绑定”的第四题。有了前面的充分准备,相信你能搞定这一题。请实现如下的这样一个 Vue,传入参数是一个 Selector 和一个数据对象,程序需要将 HTML 模板片段渲染成正确的模样。 这就是一次性的静态数据绑定。 let app = new Vue({ el: '#app', data: { user: { name: 'youngwind', age: 25 } } }); <!-- 页面中原本的 html 模板片段 --> <div id=…

课程结束

难度:困难时间:大约需要7

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

动态数据绑定(五)

任务目的 综合应用本系列的所有知识点 任务描述 这是“动态数据绑定”的最后一题了,希望你能坚持到最后。在第四题的基础上,我们考虑如何做到:"当数据发生改变时,重新渲染 DOM。" 此目标又可以分为两层难度。 相对简单的目标:数据任意部分发生了变化,都重新渲染 DOM。 相对困难的目标:数据的某一部分发生了变动,只重新渲染对应这部分数据的 DOM。 举个例子。 let app = new Vue({ el: '#app', data: { user: { name: 'youngwind', age: 25 }, …