html vdom()。tag('h1',{},'hello vdom')。toBody()ref:https://qiita.com/tom-u/items/6ab4

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了html vdom()。tag('h1',{},'hello vdom')。toBody()ref:https://qiita.com/tom-u/items/6ab4相关的知识,希望对你有一定的参考价值。

<!DOCTYPE html>
<html lang="en">
<head>
<title>Counter</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">

<style>

body {
  touch-action: manipulation;
}

</style>

<script type="module">

import * as superfine from 'https://unpkg.com/superfine?module'

export class Vdom {
  constructor() {
    this.domtree = []
  }
  t(name, attributes, children) {
    this.domtree.push(superfine.h(name, attributes, children instanceof Vdom ? children.domtree : children))
    return this
  }
  tag(name, attributes, children) {
    return this.t(name, attributes, children)
  }
  render(lastNode, container) {
    return nextNode => {
      lastNode = superfine.render(lastNode, nextNode, container)
    }
  }
  view() {
    return (()=>superfine.h('div',{},this.domtree))()
  }
  to(container) {
    this.render(null,container)(this.view())
  }
  toBody() {
    this.to(document.body)
  }
}

export const vdom = () => new Vdom()

vdom().tag('h1', {}, 'hello vdom').toBody()

vdom()
  .t('h2', {}, 'hello vdom.')
  .t('h3', {}, 'hello vdom.')
  .t('div', {}, 
    vdom()
      .t('h4', {}, 'hello vdom.')
      .t('h5', {}, 'hello vdom.')
      .t('div', {}, 'good bye.')
  )
  .to(document.getElementById('container'))

</script>

</head>
<body>
<div id="container"></div>
</body>
</html>

以上是关于html vdom()。tag('h1',{},'hello vdom')。toBody()ref:https://qiita.com/tom-u/items/6ab4的主要内容,如果未能解决你的问题,请参考以下文章

教程篇(7.0) 03. FortiGate基础架构 & 虚拟域(VDOM) ❀ Fortinet 网络安全专家 NSE 4

python3 AttributeError: 'NoneType' object has no attribute 'split'

5.5 Components -- Customizing A Compnent's Element

vue渲染过程解析-VDOM &DOM

对map的value进行排序的方法

HTML和CSS <h1> --1-- <h1>