1、首先页面结构及简单的样式先写好，需要引用的文件，引入到页面中，具体如下图所示：
2、做完上面那一步，你已经成功一大步了，下面关键的干货来了，先介绍“字符串拼接”的方式来实现数据绑定。这也是最常用的一种数据绑定方式，下面具体来说说：首先循环需要绑定的数据，然后把需要动态绑定的标签以字符串的方式拼接在一起，拼接完成后，最后统一的添加到页面中。
3、字符串拼接”的方式的优点就是事先把内容拼接好，最后统一添加到页面中，只引发一次回流；但是它也存在缺点就是原来标签绑定的事件会消失，例如，你之前给li绑定了鼠标滑过效果，使用这种方式绑定数据后，这种效果就消失了。
4、紧接着，介绍另外一种数据绑定的方式，创建一个文档碎片，相当于临时创建了一个容器。代码如下图所示：
5、下面就来看看数据绑定后的样子吧，如下图所示：
6、就简单介绍这么多吧，欢迎童鞋们来踩~后续还会为大家介绍更多的前端内容，敬请期待！
