想要使用html实现和vue一样的数据渲染效果，首先需要知道vue实现数据渲染的大致思路：
- 获取需要渲染的 DOM 节点
- 获取需要渲染的数据data
- 将 DOM 节点和数据data相结合形成新的DOM
- 将新的DOM渲染到页面
下面来通过代码具体说明实现过程
<body> <div id="root"> <div> <div> <p>{{name}} - {{age}}</p> </div> </div> </div> </body>
js代码如下：
let rkuuohao = /{{(.+?)}}/g;
// 1. 获取DOM节点
let tmpNode = document.querySelector("#root")
// 2. 获取数据
let data = {
name: 'zhou',
age: 18
}
// 3. 循环渲染数据
function rendering(tmpNode, data) {
let childNodes = tmpNode.childNodes
for (let i = 0; i < childNodes.length; i++) {
let type = childNodes[i].nodeType // 1 元素，3文本节点
if (type === 3) {
// 文本节点可以判断里面是否含有 {{}} 插值
let txt = childNodes[i].nodeValue // 该属性只有文本节点才有效
txt = txt.replace(rkuuohao, (_, g) => {
let key = g.trim()
let value = data[key]
return value
})
childNodes[i].nodeValue = txt
} else if (type === 1) {
// 元素，考虑有没有子元素
rendering(childNodes[i], data)
}
}
}
let parentNode = tmpNode.cloneNode(true) /// DOM可以直接使用克隆
rendering(parentNode, data)
// 4. 追加节点
root.parentNode.replaceChild(parentNode, root) // 此处到root为标签id
先看下效果：
渲染前：
渲染后：
数据已经正常显示到页面上啦～
从上面代码也可以看出还有很多问题，以后会慢慢完善。
下次将会对以下内容进行完善：
- Vue使用的是 虚拟DOM
- 只考虑了但属性，而Vue中大量使用了层级（ {{ child.name }} ）
- 代码没有整合