Skip to content

README.zh-CN.md

Latest commit

 

History

History
129 lines (93 loc) · 4.1 KB

README.zh-CN.md

File metadata and controls

129 lines (93 loc) · 4.1 KB

html-component

English | 中文

一个 html 增强框架

特点：

  • html 组件化、双向绑定
  • 高性能，不使用数据劫持，不使用虚拟 DOM
  • 完全的 js 能力，不用改变编程习惯
  • 模板语法与 js 一致，没有记忆负担
  • 简单易上手，掌握只需 3 分钟

体验

马上试试

<button onclick="count++">count: ${count}</button>

<script>
  let count = 0
</script>

例子：

安装

通过 <script> 标签引入，即可让 html 拥有数据绑定和自动更新视图的能力

<script
  type="module"
  src="https://wushufen.github.io/html-component/src/index.js"
></script>

你也可以通过 npm 并结合工程化工具进行使用

npm i -D @wushufen/html-component

语法

模板语法 html                                    编译后 js

<!-- ${} 插值 -->
<div>Hello ${'world'}</div>                     div.childNodes[0].nodeValue = `Hello ${'world'}`
<div attr="Hello ${'world'}"></div>             div.setAttribute('attr', `Hello ${'world'}`)

<!-- .prop 属性 -->
<div .prop="1 * 1"></div>                       div.prop = 1 * 1
<div [prop]="1 + 1"></div>                      div[prop] = 1 + 1
<div ...="{prop: 1, [prop]: 2}"></div>          ...{prop: 1, [prop]: 2}

<!-- if 条件 -->
<div if="(bool)"></div>                         if (bool) { }
<div else if="(bool)"></div>                    else if (bool) { }
<div else></div>                                else { }

<!-- for 循环 -->
<div for="(const item of array)"></div>         for (const item of array) { }
<div for="(var key in object)"></div>           for (var key in object) { }

<!-- on 事件 -->
<div onclick="change(event, this)">dom0</div>   div.onclick = function(event){ change(event, this) }
<div .onclick="console.log">.prop</div>         div.onclick = console.log

<!-- .prop + on 双向绑定 -->
<input .value="text" oninput="text=this.value"> input.value = text
                                                input.oninput = function(event){ text=this.value }

<!-- 使用组件 -->
<User .a="1" ...="{b: 2}"></User>               new User({props:{a: 1, ...{b: 2}}})


<!-- 当前组件的变量和全局变量都可以在模板中作用 -->
<script>
  import User from './User.html'

  // 任意的数据类型
  var bool = true
  let text = 'world'
  const prop = 'title'
  const object = { a: 1, b: 2 }
  const array = [1, 2, 3, 4, 5]

  // 没有限制的数据更新方式
  function  change() {
    bool = !bool
    text = text.slice(1) + text[0]
    object.key = 'value'
    array.length -= 1
    array.push((Math.random() * 10) | 0)
    array.sort((a, b) => Math.random() - 0.5)
  }
</script>

看到这里，你就已经基本掌握它了！

文档

详细介绍