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

动态数据绑定(四)

困难

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

时间平均用时0.9

关键词Vue

课程概述

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

任务目的

  1. 熟练使用原生 JS对操作 DOM 结构

任务描述

这是“动态数据绑定”的第四题。有了前面的充分准备,相信你能搞定这一题。请实现如下的这样一个 Vue,传入参数是一个 Selector 和一个数据对象,程序需要将 HTML 模板片段渲染成正确的模样。 这就是一次性的静态数据绑定。

let app = new Vue({
  el: '#app',
  data: {
    user: {
      name: 'youngwind',
      age: 25
    }
  }
});
<!-- 页面中原本的 html 模板片段 -->
<div id="app">
    <p>姓名:{{user.name}}</p>
    <p>年龄:{{user.age}}</p>
</div>
<!-- 最终在页面中渲染出来的结果 -->
<div id="app">
    <p>姓名:youngwind</p>
    <p>年龄:25</p>
</div>

PS:此题尚未要求实现动态数据绑定

任务注意事项

  1. 不能使用任何第三方的库
  2. 程序执行环境为浏览器
学员提交的作业 (-)
学员名称提交时间提交的代码预览效果评价数平均得分操作
课程优秀学习笔记

暂无优秀学习笔记~