当你以为前端已经“卷”无可“卷”的时候，Alpine.js 站出来说：兄弟，别写 JavaScript 了，直接写 HTML 就行！

没错，今天我们来聊一聊这个最近又火起来的前端框架——Alpine.js。一个写法极度简洁、逻辑全写在 HTML 里的轻量级框架，甚至有点“Tailwind for JavaScript”的味道。更重要的是：一句 JS 不写，也能做出交互效果！

框架简介

Alpine.js 是一个专注于简洁声明式写法的前端框架，它的理念就是让你用最少的 JavaScript，甚至完全不写 JavaScript，完成常见的交互需求。通过一组灵活的 HTML 属性（指令），你可以直接在 HTML 里绑定数据、响应事件、控制显示、实现循环，甚至定义计算属性和监听器。

用官方的话说，它是 Vue 的极简版本，适合用于组件层交互，但不搞虚拟 DOM，不搞复杂构建。

目前 GitHub Star 数已超过 30,000，受欢迎程度可见一斑。

核心功能一览

Alpine.js 的魅力在于它的语法直观且极具表现力，以下是一些常用指令和功能：

• • x-data：声明组件的数据状态
• • x-text：绑定文本输出
• • x-on / @事件名：绑定事件监听（支持 .outside 等修饰符）
• • x-show：控制元素显示与隐藏
• • x-model：双向绑定输入值
• • x-for：实现循环渲染
• • 还支持：计算属性、watch 监听、组件引用、过渡动画、插件机制……

这些指令加起来，几乎覆盖了 Vue 小型项目 80% 的功能，但你可以直接写在 HTML 文件里，不用打包工具，不用 npm 安装，一行 CDN 直接开整！

实战示例：三连演示太香了

1. 计数器（Hello, Reactive World）

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

没错，就是三行 HTML，实现一个响应式的计数器。x-data 定义状态，@click 绑定事件，x-text 自动刷新文本。用 Vue 写都得多几行 JS。

2. 下拉菜单（支持点击外部关闭）

<div x-data="{ open: false }">
  <button @click="open = !open">切换菜单</button>
  <div x-show="open" @click.outside="open = false">内容区域</div>
</div>

使用 x-show 控制显示，@click.outside 实现点击其他区域自动关闭，这种高级交互，原生 JS 写起来可没这么轻松。

3. 搜索过滤（带计算属性和循环渲染）

<div
  x-data="{
    search: '',
    items: ['foo', 'bar', 'baz'],
    get filteredItems() {
      return this.items.filter(i => i.startsWith(this.search));
    }
  }"
>
  <input x-model="search" placeholder="搜索...">
  <ul>
    <template x-for="item in filteredItems" :key="item">
      <li x-text="item"></li>
    </template>
  </ul>
</div>

在这个例子中，我们同时使用了输入双向绑定、计算属性（getter）、动态列表渲染，让一个搜索功能几乎“零 JS 代码”完成。谁说 HTML 不能写逻辑？

Alpine.js 的适用场景

Alpine.js 并不是要和 React / Vue / Angular 抢饭碗，它更像是一个“增强 HTML 交互能力的小工具”。你可以在以下场景中使用它：

• • 老项目中，临时加点交互，懒得引入大框架
• • Markdown 文档中，加入搜索/收起/切换等小功能
• • 和 TailwindCSS 配合使用，一键构建 UI + 交互
• • 页面脚手架、管理后台的小组件（例如弹窗、Tab、筛选器）

一句话总结：轻量级、高效率、低学习成本，写法还酷！

快速上手

只需在 HTML 加一行 CDN：

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

然后就可以开始写 HTML+交互逻辑了，不需要任何构建、打包、配置。

#alpine #前端 #前端框架 #html #前端新框架

阅读原文：原文链接