Skip to content

Instantly share code, notes, and snippets.

@dickenslian
dickenslian / vdom_v6.html
Created Sep 9, 2018
你不知道的Virtual DOM(六):事件处理&异步更新
View vdom_v6.html
<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 Sep 3, 2018
你不知道的Virtual DOM(五):自定义组件
View vdom_v5.html
<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 Aug 29, 2018
你不知道的Virtual DOM(四)
View vdom_v4.html
<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 Aug 28, 2018
你不知道的Virtual DOM(三)
View vdom_v3.html
<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_v2.html
Created Aug 25, 2018
你不知道的Virtual DOM(二)
View vdom_v2.html
<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_v1.html
Last active Aug 17, 2020
你不知道对Virtual DOM(一)
View vdom_v1.html
<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)