扫一扫分享
让每个人都能随时随地在任何设备上通过几行代码构建有用的用户界面应用程序。VanJS 是一个基于纯 JavaScript 和 dom 的超轻量级、零依赖、无主导的反应式用户界面框架。使用 VanJS 编程感觉就像用脚本语言构建 react 应用程序一样,无需 JSX。查看下面的 Hello World 代码:
const Hello = () => div(
p("Hello"),
ul(
li("World"),
li(a({href: "https://vanjs.org/"}, "VanJS")),
),
)
van.add(document.body, Hello())
// Alternatively, you can write:document.body.appendChild(Hello())
您可以使用我们的在线转换器将任何 html 或 MD 代码段转换成 VanJS 代码。
VanJS 还能帮助你管理状态和 UI 绑定,其 api 更为自然:
const Counter = () => {
const counter = van.state(0)
return div(
"❤️ ", counter, " ",
button({onclick: () => ++counter.val}, "good"),
button({onclick: () => --counter.val}, "bad"),
)
}
van.add(document.body, Counter())
无需 React/JSX 的反应式编程
声明式 DOM 树组成、可重用组件、反应式状态绑定--VanJS 提供了 React 的所有优点,但无需 React、JSX、transpiling、虚拟 DOM 或任何隐藏逻辑。一切都通过简单的 JavaScript 函数和 DOM 构建。
即拿即用
无需安装、无需配置、无需依赖、无需转编、无需集成开发环境设置。只需在脚本或 HTML 文件中添加一行即可开始编码。任何使用 VanJS 的代码都可以直接在浏览器的开发者控制台中粘贴和执行。VanJS 可以让您专注于应用程序的业务逻辑,而不是被框架和工具所困扰。
超轻量级
VanJS 是世界上最小的反应式用户界面框架,压缩包仅有 1.0kB。它比大多数流行的替代框架小 50~100 倍。猜猜你能从这个 1.0kB 的框架中获得什么?反应式用户界面编程的所有基本功能--DOM 模板、状态、状态绑定、状态派生、效果、SPA、客户端路由。
手机预览