# Alpine.js ![npm bundle size](https://img.shields.io/bundlephobia/minzip/alpinejs) ![npm version](https://img.shields.io/npm/v/alpinejs) [![Chat](https://img.shields.io/badge/chat-on%20discord-7289da.svg?sanitize=true)](https://alpinejs.codewithhugo.com/chat/) Alpine.js 通过很低的成本提供了于 Vue 或 React 这类大型框架相近的响应式和声明式特性。 你可以继续操作 DOM，并在需要的时候使用 Alpine.js。 可以理解为 JavaScript 版本的 [Tailwind](https://tailwindcss.com/)。 > 备注：Alpine.js 的语法几乎完全借用自 [Vue](https://vuejs.org/) （并用 [Angular](https://angularjs.org/) 的语法做了些扩展）。在此由衷感谢他们对 Web 世界的贡献。 ## 安装 Install **使用 CDN：** 把以下脚本加入到你的 `` 尾部. ```html ``` 就是这样，Alpine.js 会自行初始化。 生产环境中，建议在链接中锁定特定版本号，以此避免新版本中的变更造成问题。 例如，锁定版本为 `2.8.2` (最新版本): ```html ``` **使用 npm：** 从 npm 安装依赖包。 ```js npm i alpinejs ``` 并在你的脚本中引入它。 ```js import 'alpinejs' ``` **需要 IE11 支持的场景** 改用这段脚本。 ```html ``` 这一写法使用了 [module/nomodule 模式（英文）](https://philipwalton.com/articles/deploying-es2015-code-in-production-today/) ，这样的写法可以让现代浏览器自动加载模块版本依赖，而在 IE11 或其他早期浏览器中自动加载专属兼容版本。 ## 使用 Use *下拉菜单（Dropdown）/模态弹窗（Modal）* ```html
``` *标签页 Tabs* ```html
Tab Foo
Tab Bar
``` 这样的写法也可以用在其他地方： *鼠标悬停时从服务器预加载下拉菜单中的 HTML 内容。* ```html
Loading Spinner...
``` ## 学习 Learn 当前共有 14 个指令可用，如下所示： | 指令 | 描述 | | --- | --- | | [`x-data`](#x-data) | 定义一个新的组件作用域。 | | [`x-init`](#x-init) | 组件初始化时运行其中的表达式。 | | [`x-show`](#x-show) | 根据表达式结果（true 或 false）控制元素的 `display: none;`（译者注：控制模块显示/隐藏） | | [`x-bind`](#x-bind) | 将当前属性的值设定为指令中表达式的结果。 | | [`x-on`](#x-on) | 向元素上挂载事件监听器。当事件触发时执行其中的表达式。 | | [`x-model`](#x-model) | 向当前元素新增「双向数据绑定」。保持输入元素与组件数据同步。 | | [`x-text`](#x-text) | 和 `x-bind` 类似，但更新的是元素的 `innerText`。 | | [`x-html`](#x-html) | 和 `x-bind` 类似，但更新的是元素的 `innerHTML`。 | | [`x-ref`](#x-ref) | 在组件外获取原始 DOM 元素的简便方法。 | | [`x-if`](#x-if) | 值为 false 时将从 DOM 中完全移除元素。需要在 `