V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
oyps
V2EX  ›  程序员

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

  •  
  •   oyps ·
    oyps · 98 天前 · 3072 次点击
    这是一个创建于 98 天前的主题,其中的信息可能已经有所发展或是发生改变。

    官网: 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 树直接就是原生的,整体上很有极客风范。

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

    10 条回复    2024-07-12 19:06:12 +08:00
    fox0001
        1
    fox0001  
       98 天前 via Android
    类似的框架,用过 petite-vue 。响应式框架很爽,我写个小页面也喜欢用上它
    BeijingBaby
        2
    BeijingBaby  
       98 天前
    把本来用 html 写的,重新用 js 语法写一遍……
    gdfsjunjun
        3
    gdfsjunjun  
       98 天前
    就像小程序的富文本?居然还是节点写法。
    zsj1029
        4
    zsj1029  
       98 天前 via iPhone   ❤️ 1
    这种可以用 jsx 语法插件配合写,自动全响应式,有个 mithril 不要太爽,早已放弃 react
    GeekGao
        5
    GeekGao  
       97 天前
    歪个楼,推荐 SolidJS
    ragnaroks
        6
    ragnaroks  
       97 天前
    以前弄网易 buff 的捡漏机器人用过这个,只能说,如果条件允许还是上 react 、vue 吧
    78786381
        7
    78786381  
       97 天前
    感觉是 vue 或者 react 编译之后的样子
    sleepm
        8
    sleepm  
       97 天前
    歪个楼,反应式,哪个值变化了,其他的跟着变化
    响应式,窗口变化了,界面变化
    imba.io 也不错
    最小的,都是没有现成 ui 的,需要手撸 css
    suyuyu
        9
    suyuyu  
       97 天前
    @GeekGao solid 有推荐的组件库吗
    GeekGao
        10
    GeekGao  
       97 天前
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   5028 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 26ms · UTC 03:52 · PVG 11:52 · LAX 20:52 · JFK 23:52
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.