Alpine.js 速查

使用说明

Alpine.js 常用属性速查：基础、条件与循环、引用与通信、官方插件、魔法属性；支持搜索与分类筛选，点击即可复制。

1. 按用途点分类：基础、条件与循环、引用与通信、官方插件、魔法属性。
2. 点「属性」列复制，替换状态与选择器后使用。
3. 用 x-data 定义局部状态，x-model 做表单双向绑定。
4. 复杂组件用 Alpine.data 注册可复用逻辑，用 $store 做全局状态。

常见问题

Alpine.js 和 Vue/React 有何不同？

Alpine 是轻量的「HTML 里写交互」方案，无需构建、直接在标签上用 x-* 属性，适合服务端渲染页面点缀交互，而非大型 SPA。

x-show 和 x-if 怎么选？

x-show 只切换 display，元素始终在 DOM；x-if 会真正增删元素，需配合 <template>。频繁切换用 show，需要移除用 if。

怎么做组件间通信？

用 $dispatch 派发自定义事件，接收方用 x-on:事件.window 监听；全局共享状态用 Alpine.store。

延伸阅读

• htmx 速查
• Vue 3 速查
• HTML 速查表