这是一个创建于 1170 天前的主题，其中的信息可能已经有所发展或是发生改变。
rt ，Leafjs 是一个基于 web-components 的前端小型框架，目前主要功能功能有自定义组件与类似 Vue 的响应式系统。例如：
<!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>My App</title> </head> <body> <my-counter></my-counter> <script type="module"> import { LeafComponent, registerComponent, HTMLElements } from "https://cdn.jsdelivr.net/gh/samzhangjy/leafjs@master/packages/leaf/dist/leaf.min.js"; class Counter extends LeafComponent { constructor() { super(); this.state = { count: 0 }; } render() { const plusButton = new HTMLElements.button("+"); plusButton.addEventListener("click", () => { this.state.count++; }); const minusButton = new HTMLElements.button("-"); minusButton.addEventListener("click", () => { this.state.count--; }); const currentCount = new HTMLElements.p( `Counter: ${this.state.count}` ); return [plusButton, minusButton, currentCount]; } } registerComponent("my-counter", Counter); </script> </body> </html> 就可以实现一个简单的计数器。
文档： https://leafjs.samzhangjy.com/
GitHub： https://github.com/samzhangjy/leafjs
当然现在 Leafjs 还有很多不足，欢迎大佬们提出相关建议！
2 条回复 2022-08-30 00:34:00 +08:00
 | 1 kkkyrieliu 2022-08-29 16:56:58 +08:00 不如去成为 lit.dev 的贡献者 |
 | 2 Danswerme 2022-08-30 00:34:00 +08:00 via iPhone 明天睡醒了看看 |
Select Language