Skip to content

Instantly share code, notes, and snippets.

@dickenslian
dickenslian / vdom_v1.html
Last active September 14, 2021 02:35
你不知道对Virtual DOM(一)
<body>
<script src="compiled.js"></script>
<style>
body { margin: 0; font-size: 24; font-family: sans-serif }
.li-1 { background: red }
</style>
<main id="main"></main>
<script>
var main = document.getElementById('main')
render(main)
@dickenslian
dickenslian / vdom_v2.html
Created August 25, 2018 04:22
你不知道的Virtual DOM(二)
<body>
<style>
body { margin: 0; font-size: 24; font-family: sans-serif }
.li-1 { background: red }
.li-2 { background: green }
.li-3 { background: yellow }
.li-4 { background: purple }
.li-0 { background: gray }
</style>
<script src="compiled.js"></script>
@dickenslian
dickenslian / vdom_v3.html
Created August 28, 2018 17:24
你不知道的Virtual DOM(三)
<body>
<style>
body { margin: 0; font-size: 24; font-family: sans-serif }
.li-1 { background: red }
.li-2 { background: green }
.li-3 { background: yellow }
.li-4 { background: purple }
.li-0 { background: gray }
</style>
<script src="compiled.js"></script>
@dickenslian
dickenslian / vdom_v4.html
Created August 29, 2018 13:10
你不知道的Virtual DOM(四)
<body>
<style>
body { margin: 0; font-size: 24; font-family: sans-serif }
.li-1 { background: red }
.li-2 { background: green }
.li-3 { background: yellow }
.li-4 { background: purple }
.li-0 { background: gray }
</style>
<script src="compiled.js"></script>
@dickenslian
dickenslian / vdom_v5.html
Last active September 3, 2018 04:25
你不知道的Virtual DOM(五):自定义组件
<body>
<style>
body { margin: 0; font-size: 24; font-family: sans-serif }
.li-1 { background: red }
.li-2 { background: green }
.li-3 { background: yellow }
.li-4 { background: purple }
.li-0 { background: gray }
</style>
<script src="compiled.js"></script>
@dickenslian
dickenslian / vdom_v6.html
Created September 9, 2018 11:17
你不知道的Virtual DOM(六):事件处理&异步更新
<body>
<style>
body { margin: 0; font-size: 24; font-family: sans-serif }
.li-1 { background: red }
.li-2 { background: green }
.li-3 { background: yellow }
.li-4 { background: purple }
.li-0 { background: gray }
</style>
<script src="compiled.js"></script>