let vertualDom =createElement('ul',{class:'list'},[createElement('ul',{class:'list'},['a']),createElement('ul',{class:'list'},['b']),createElement('ul',{class:'list'},['c'])])
const render =(vnode){let el = document.createElement(vnode.type);return el;}
打印一下:
let vertualDom =createElement('ul',{class:'list'},[createElement('ul',{class:'list'},['a']),createElement('ul',{class:'list'},['b']),createElement('ul',{class:'list'},['c']),])let el =render(vertualDom);
console.log(el);
2.有了DOM之后,我们给dom设置属性.由于属性可能比较多,
因此我们使用for ... in 拿到键和值
使用setAttribute来设置属性
constrender=(vnode)=>{let el = document.createElement(vnode.type);let props = vnode.type;for(let key in props){
el.setAttribute(key, props[key]);}}
检测一下,改写vertualDom
let vertualDom =createElement('ul',{class:'list', style:'border:1px solid black'},[createElement('ul',{class:'list'},['a']),createElement('ul',{class:'list'},['b']),createElement('ul',{class:'list'},['c']),])let el =render(vertualDom);
document.body.appendChild(el);