英文官网地址：https://alpinejs.dev/directives/data
中文文档地址：https://www.alpinejs.cn/
安装
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine.min.js" defer></script>
使用
<div x-data="{ open: false }"><button @click="open = true">Open Dropdown</button><ulx-show="open"@click.away="open = false">Dropdown Body</ul></div>
<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>
<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>
学习
学习 Learn#
当前共有 14 个指令可用，如下所示：
| 指令 | 描述 |
|---|---|
x-data |
定义一个新的组件作用域。 |
x-init |
组件初始化时运行其中的表达式。 |
x-show |
根据表达式结果（true 或 false）控制元素的 display: none;（译者注：控制模块显示/隐藏） |
x-bind |
将当前属性的值设定为指令中表达式的结果。 |
x-on |
向元素上挂载事件监听器。当事件触发时执行其中的表达式。 |
x-model |
向当前元素新增「双向数据绑定」。保持输入元素与组件数据同步。 |
x-text |
和 x-bind 类似，但更新的是元素的 innerText。 |
x-html |
和 x-bind 类似，但更新的是元素的 innerHTML。 |
x-ref |
在组件外获取原始 DOM 元素的简便方法。 |
x-if |
值为 false 时将从 DOM 中完全移除元素。需要在 <template> 标签中使用。 |
x-for |
为数组中的每一项创建一个新的 DOM 节点。需要在 <template> 标签中使用。 |
x-transition |
用于在过渡（CSS Translation）的各个阶段中为元素添加 class 的指令。 |
x-spread |
为了更好的复用，可以绑定一个带有 Alpine 指令（作为 key）的对象到元素上。 |
x-cloak |
这一属性会在 Alpine 初始化完成后被移除，可以用来隐藏未初始化的 DOM。 |
以及 6 个魔法属性：
| 魔法属性 | 描述 |
|---|---|
$el |
获取根元素的 DOM 节点。 |
$refs |
获取组件中标记有 x-ref 的 DOM 元素。 |
$event |
在事件监听器中获取浏览器原生的「Event」对象。 |
$dispatch |
创建一个「CustomEvent」并使用其内部的 .dispatchEvent() 方法进行分发。 |
$nextTick |
在 Alpine 做出响应式 DOM 更新后，执行一个给出的表达式。 |
$watch |
当监听的组件属性发生变化时，触发给定的回调函数。 |
抽离组件逻辑
你可以把数据（以及行为）通过一个可复用的函数抽离出来：
<div x-data="dropdown()"><button x-on:click="open">Open</button><div x-show="isOpen()" x-on:click.away="close">// Dropdown</div></div><script>function dropdown() {return {show: false,open() { this.show = true },close() { this.show = false },isOpen() { return this.show === true },}}</script>
更多请关注官网
