# 

> [](https://www.ftls.xyz/docs/alpine.js/readme/)
> Penned by [恐咖兵糖](https://www.ftls.xyz/) on 0001-01-01

编写 content/posts/Alpinejs Essentials.md。内容为 Alpinejs Essentials。
需要包含
Essentials
Installation
State
Templating
Events
Lifecycle
等小节。每个小节内容都要给出解释说明，适用范围，注意事项等。


https://www.ftls.xyz/utils/alpine-playground.html

这是一个完整的 Alpine.js Playground，功能包括：

**编辑器区域**
- 实时代码编辑，`Ctrl/Cmd + Enter` 快速运行
- Tab 键插入缩进，字符数实时统计
- 可拖拽中间分割条调整编辑器与预览比例

**6 个内置示例**（顶部标签栏切换）
- 计数器 / Todo 列表 / 搜索过滤 / 选项卡 / 模态框 / 表单验证

**左侧参考面板**
- 14 个常用指令（`x-data`、`x-show`、`x-for` 等）
- 8 个魔法属性（`$el`、`$refs`、`$watch` 等）
- 5 个常用模式（Toggle、Fetch、Store 等）
- 点击任意项可将代码片段插入光标位置

**底部控制台** — 显示运行时间与操作日志