⚡ SepX Demo
零依赖 · 零构建 · 原生 JS 工具库 — 12KB 核心，全功能前端
1. 响应式绑定 $.link
JS API 初始化 — $.link(container, state, computed) 驱动
计数器
{count}
双向绑定 x-model
你好，{name}！
计算属性 computed
¥{price}
×{qty}
总价：{total | format}
进度（{count} / {max} = {percent}%）：
2. 条件渲染 x-if / x-else-if / x-else
JS API 初始化 — $.link(container, state) 驱动
当前状态：{status}
⏳ 加载中...
✅ 请求成功
❌ 请求失败
💤 空闲
x-else-if / x-else 必须紧邻 x-if 元素，支持链式条件分支
3. 列表渲染 x-for
JS API 初始化 — $.link(container, state + methods) 驱动
共 {items.length} 项
{item.id}.
{item.name}
{item.done?'已完成':'进行中'}
暂无任务，点击"添加"创建
:key 指定唯一标识（id），支持 item in items 和 (item, index) in items 两种语法
4. 表格渲染 x-table + 过滤器
JS API 初始化 — $.link + products/filtered 双模型驱动
{filtered.length} 条
| ID | 名称 | 价格 | 库存 | 状态 | 操作 |
|---|---|---|---|---|---|
| {p.id} | {p.name} | {p.price | format} | {p.stock} | {p.active?'启用':'禁用'} |
无匹配结果
x-table 自动包裹 <tr>，支持过滤器 {price | format} 和 x-class 动态样式
5. 全局状态 $.store（跨标签页同步）
JS API 初始化 — $.store + $.link 两步实现持久化 + 跨页同步
购物车
🛒 {cart}
收藏
⭐ {favs}
打开两个标签页，点击按钮 — 数据实时同步。localStorage 持久化，刷新不丢失。
6. 异步请求 $.timeout / $.apiGet
JS API 初始化 — $.timeout + vm6.fetchData 模拟请求流程
⏳ 请求中...
响应结果：
状态码：{code}
消息：{msg}
耗时：{elapsed}ms
$.timeout 模拟异步延迟，$.apiGet 用于真实 API 请求
7. 更多指令 x-show / @event / x-text / x-once / x-html / x-pre
JS API 初始化 — $.link 注入状态 + methods，6 类指令一站式演示
x-show（display 切换）
✅ 可见
❌ 隐藏
x-show 切换 display，x-if 控制 DOM 存在
@event（事件绑定）
点击我：{clicks}
@click 绑定 proxy 方法
x-text（替换文本）
x-text 替换全部文本，含原有静态文字
x-once（一次性渲染）
x-once: （不更新）
x-once 只在初始化时渲染一次
x-html（innerHTML）
x-html 设置 innerHTML，注意 XSS
x-pre（跳过编译）
{count} 不会被替换
x-pre 跳过该元素及子元素编译