虚拟dom
根据 snabbdom 进行渲染 自己可以百度搜索
呈现码
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>虚拟DOm的</h1>
<div id="container"></div>
<button id="btn">改变</button>
//必须引入片段
<script src="https://cdn.bootcdn.net/ajax/libs/snabbdom/0.7.4/h.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/snabbdom/0.7.4/snabbdom-class.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/snabbdom/0.7.4/snabbdom-eventlisteners.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/snabbdom/0.7.4/snabbdom-props.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/snabbdom/0.7.4/snabbdom-style.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/snabbdom/0.7.4/snabbdom.js"></script>
<script src="./test.js"></script>
</body>
</html>test.js
//引入snabbdom库
const snabbdom = window.snabbdom
//将vnode (虚拟节点)塞入空的容器中
const patch = snabbdom.init([
snabbdom_class,
snabbdom_props,
snabbdom_style,
snabbdom_eventlisteners
])
//创建vnode (虚拟节点)
const h = snabbdom.h
//空的容器
const container = document.getElementById('container');
// 获取按钮节点
const btn = document.getElementById('btn')
//创建vnode **结构h()函数必须一样(标签,属性style,内容如孩子[]表示;如没有本标签内容)**
const vnode = h('ul#list', {}, [
h('li.item', {}, '第一项'),
h('li.item', {}, '第二项'),
])
patch(container, vnode)
//点击时 重新渲染虚拟dom 如重新渲染 的标签没有发生变化是不会重新加载的 只会加载重新渲染的
btn.addEventListener('click', () => {
const newVnode = h('ul#list', {}, [
h('li.item', {}, '第一项'),
h('li.item', {}, '第二项11111'),
h('li.item', {}, '第三项'),
])
// 用新的vnode 去更新 替换旧的vnode
patch(vnode, newVnode)
//下面可以省略
vnode = newVnode
})
