Alpine.js 声明式交互入门

背景

Alpine.js 是"HTML 中的 JavaScript"。它不需要构建工具、不需要组件文件、不需要虚拟 DOM——直接在 HTML 标签上添加交互指令。对于毕设中那种"大部分是静态页面，只需要少量交互"的场景，Alpine.js 是比 Vue/React 更务实的选择。

---

核心概念

14 个指令 + 6 个 Magic

Alpine 非常精简，总共就 14 个指令：

指令	作用
x-data	定义组件状态
x-bind / :attr	绑定属性
x-on / @event	事件处理
x-model	双向绑定
x-show / x-if	条件渲染
x-for	循环
x-text / x-html	文本渲染
x-effect	响应式副作用
x-ref	DOM 引用
x-transition	过渡动画

6 个 Magic

$el        // 当前 DOM 元素
$refs      // x-ref 引用集合
$watch     // 监听数据变化
$dispatch  // 自定义事件
$nextTick  // DOM 更新后回调
$store     // 全局状态（Alpine.store）

---

分步操作

第一步：引入 Alpine

<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>

第二步：第一个组件

<div x-data="{ count: 0 }">
  <button @click="count--">-</button>
  <span x-text="count"></span>
  <button @click="count++">+</button>
</div>

第三步：数据联动

<div x-data="{ price: 100, qty: 1 }">
  <input type="number" x-model="price">
  <input type="number" x-model="qty">
  <p>总价: <span x-text="price * qty"></span> 元</p>
</div>

第四步：条件与循环

<div x-data="{ items: ['苹果', '香蕉'], newItem: '' }">
  <input x-model="newItem" @keyup.enter="items.push(newItem); newItem = ''">
  
  <template x-for="item in items">
    <li x-text="item"></li>
  </template>

  <p x-show="items.length === 0">列表为空</p>
</div>

---

毕设推荐场景

传统多页应用改造

后端渲染的 HTML 页面，加 Alpine 实现下拉菜单、模态框、表单验证——不改架构。

简单的管理后台

表格排序、搜索过滤、弹窗确认，Alpine 几行搞定。

与 Tailwind CSS 搭配

Tailwind 管样式，Alpine 管逻辑。两者都是"在 HTML 中写一切"的理念。

---

思考题

1. Alpine.js 和 Vue 的指令系统有什么相似之处？为什么不直接用 Vue？
2. x-data 中的数据是响应式的，Alpine 内部如何实现？
3. 什么场景该用 Alpine.js，什么场景该升级到 Vue/React？

---

小结

Alpine.js 是"现代版 jQuery"——用声明式替代命令式，用 HTML 属性替代 JS 选择器。对于交互量不大的毕设页面，它的开发效率是任何框架都无法比拟的。