编程

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

1990 2022-01-06 08:12:04

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