Alpine.js 框架入门——简单、轻量级的强大 JavaScript 框架

Alpine.js 通过很低的成本提供了与 Vue 或 React 这类大型框架相近的响应式和声明式特性。

你可以继续操作 DOM，并在需要的时候使用 Alpine.js。

可以理解为 JavaScript 版本的 Tailwind。

安装

使用 CDN： 把以下脚本加入到你的 <head> 尾部.

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

就是这样，Alpine.js 会自行初始化。

生产环境中，建议在链接中锁定特定版本号，以此避免新版本中的变更造成问题。例如，锁定版本为 2.8.2 (最新版本):

<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.8.2/dist/alpine.min.js" defer></script>

使用 npm： 从 npm 安装依赖包。

npm i alpinejs

并在你的脚本中引入它。

import 'alpinejs'

需要 IE11 支持的场景 改用这段脚本。

<script type="module" src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine.min.js"></script>
<script nomodule src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine-ie11.min.js" defer></script>

这一写法使用了 module/nomodule 模式（英文），这样的写法可以让现代浏览器自动加载模块版本依赖，而在 IE11 或其他早期浏览器中自动加载专属兼容版本。

使用

下拉菜单（Dropdown）/模态弹窗（Modal）

<div x-data="{ open: false }">
	<button @click="open = true">Open Dropdown</button>

	<ul
		x-show="open"
		@click.away="open = false"
		>
		Dropdown Body
	</ul>
</div>

标签页 Tabs

<div x-data="{ tab: 'foo' }">
	<button :class="{ 'active': tab === 'foo' }" @click="tab = 'foo'">Foo</button>
	<button :class="{ 'active': tab === 'bar' }" @click="tab = 'bar'">Bar</button>

	<div x-show="tab === 'foo'">Tab Foo</div>
	<div x-show="tab === 'bar'">Tab Bar</div>
</div>

这样的写法也可以用在其他地方： 鼠标悬停时从服务器预加载下拉菜单中的 HTML 内容。

<div x-data="{ open: false }">
	<button
	@mouseenter.once="
	fetch('/dropdown-partial.html')
	.then(response => response.text())
	.then(html => { $refs.dropdown.innerHTML = html })
	"
	@click="open = true"
	>Show Dropdown</button>

	<div x-ref="dropdown" x-show="open" @click.away="open = false">
	Loading Spinner...
	</div>
</div>

学习

当前共有 18 个指令可用，如下所示：

指令	描述
x-data	为一块HTML代码块声明一个新的Alpine组件和数据
x-init	当元素被Alpine初始化时，执行其中代码。
x-show	根据表达式结果（true 或 false）控制元素的 display: none;（译者注：控制模块显示/隐藏）
x-bind	将当前属性的值设定为指令中表达式的结果。
x-on	向元素上挂载事件监听器。当事件触发时执行其中的表达式。
x-model	向当前元素新增「双向数据绑定」。保持输入元素与组件数据同步。
x-modelable	x-modelable 允许你暴露 Alipline 属性，作为 x-model 的目标。
x-text	和 x-bind 类似，但更新的是元素的 innerText。
x-html	和 x-bind 类似，但更新的是元素的 innerHTML。
x-ref	在组件外获取原始 DOM 元素的简便方法。
x-if	根据条件从整个页面中添加/移除一段HTML代码块。
x-for	为数组中的每一项创建一个新的 DOM 节点。需要在 <template> 标签中使用。
x-transition	用于在过渡（CSS Translation）的各个阶段中为元素添加 class 的指令。
x-cloak	这一属性会在 Alpine 初始化完成后被移除，可以用来隐藏未初始化的 DOM。
x-effect	每次依赖更新时，执行一次脚本。
x-ignore	阻止HTML代码块被Alpine初始化。
x-teleport	在<template>元素中添加x-teleport, Alpine会将该元素追加（ append ）到对应的选择器中。
x-id	x-id 让你可以使用$id()生成一个新的id, 为其声明新的作用域。他接收一个字符串数组(ID名), 同时在$id('…')生成的字符后添加后缀，使之在页面中是唯一的。 x-id 必须和 $id(…)魔法属性一起配合使用。

以及 9个魔法属性：

魔法属性	描述
$el	获取根元素的 DOM 节点。
$refs	获取组件中标记有 x-ref 的 DOM 元素。
$store	使用Alpine.store(…)注册的全局数据，你可以使用$store获取
$dispatch	从当前元素中分发一个自定义浏览器事件
$nextTick	在 Alpine 做出响应式 DOM 更新后，执行一个给出的表达式。
$watch	当监听的组件属性发生变化时，触发给定的回调函数。
$root	$root 魔法属性用于查询Alpine组件的根元素。换言之，DOM 树中包含 x-data 的最近的祖先元素。
$data	获取当前Alpine数据作用域的下的数据。(通常指由x-data提供的数据)。
$id	用以生成元素ID，确保其不会与同一页面的其他ID名冲突

3个方法：

方法名	描述
Alpine.data	Alpine.data(...) 让你在应用内重新使用 x-data 内容
Alpine.store	声明一组全局的，响应式数据。任何地方都可以通过$store获取数据。你可以在alpine:init 监听器(比如通过<script>标签引入Alpine)中定义或者手动调用Alpine.start()前定义(引入Alpine编译)
Alpine.bind	Alpine.bind(...) 让你可以应用内重用 x-bind 对象

Alpine.js 框架入门——简单、轻量级的强大 JavaScript 框架

安装

使用

学习

相关推荐：

最新文章：