最小的响应式 UI 框架 Van.js,大家用过吗?

2024-07-12 07:44:37 +08:00
 oyps

官网: https://vanjs.org/

简单来说,这个框架允许以下面的方式来创建 DOM 树,方法名等于标签名,并且可以嵌套。

const element = div({ class: 'box' },
    '文本内容 01', '文本内容 02', button('按钮名称')
)

示例如下:

import van from 'vanjs-core'

const { div, button } = van.tags

const App = () => {
    return div(
    	button({ class: 'btn btn-success' }, 'Click Me')
    )
}

van.add(document.body, App())

可以通过 const myValueState = van.state(value) 来创建状态值,通过 myValueState.val 来访问和修改状态值。

用了一段时间了,感觉特点就是特别的轻量简约,基本不需要配置环境,安装依赖包后就可以导入使用,还有个特点就是创建出来的 DOM 树直接就是原生的,整体上很有极客风范。

小项目拿来折腾还是很好玩的,不知道大家有没有使用过的,感觉怎么样。

3529 次点击
所在节点    程序员
10 条回复
fox0001
2024-07-12 08:24:13 +08:00
类似的框架,用过 petite-vue 。响应式框架很爽,我写个小页面也喜欢用上它
BeijingBaby
2024-07-12 08:38:01 +08:00
把本来用 html 写的,重新用 js 语法写一遍……
gdfsjunjun
2024-07-12 08:40:12 +08:00
就像小程序的富文本?居然还是节点写法。
zsj1029
2024-07-12 09:01:10 +08:00
这种可以用 jsx 语法插件配合写,自动全响应式,有个 mithril 不要太爽,早已放弃 react
R4rvZ6agNVWr56V0
2024-07-12 13:47:27 +08:00
歪个楼,推荐 SolidJS
ragnaroks
2024-07-12 16:54:32 +08:00
以前弄网易 buff 的捡漏机器人用过这个,只能说,如果条件允许还是上 react 、vue 吧
xR13zp0h67njQr2S
2024-07-12 17:46:24 +08:00
感觉是 vue 或者 react 编译之后的样子
sleepm
2024-07-12 18:21:52 +08:00
歪个楼,反应式,哪个值变化了,其他的跟着变化
响应式,窗口变化了,界面变化
imba.io 也不错
最小的,都是没有现成 ui 的,需要手撸 css
suyuyu
2024-07-12 19:04:43 +08:00
@GeekGao solid 有推荐的组件库吗
R4rvZ6agNVWr56V0
2024-07-12 19:06:11 +08:00

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/1056715

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX