声明我们的网站数据：x-data

与原生 JavaScript 不同，大多数 AlpineJS 指令和结构仅在 AlpineJS 组件中生效。这意味着我们只能在组件内部访问它们。一个 AlpineJS 组件是一段用 x-data 标记的 HTML 代码块。

声明 AlpineJS 组件

我们使用 x-data 指令来定义 AlpineJS 组件。这是 AlpineJS 组件中首先出现的部分。通常，我们将 x-data 定义在一个包装元素上。这使得 x-data 中的属性对包装元素的子元素可见。

下面的代码展示了如何使用 x-data 将一段 HTML 定义为 AlpineJS 组件：

上述示例是一个最简化的可折叠组件。从 第 6 行 开始，我们定义了 open 为 false，这会隐藏其内容，直到点击可折叠标题为止。

注意，open 在作为组件包装元素的 div 中是可访问的。由于 第 7 至 10 行 的 h4 和 p 元素位于 div 内部，因此它们也能访问 open 属性。

在 x-data 中定义方法

AlpineJS 将 x-data 视为一个普通的 JavaScript 对象进行求值。因此，我们可以在 x-data 中定义完整的方法甚至 getter。下面的代码展示了如何在 x-data 中定义一个方法：

上述示例的效果与前一个相同。不同之处在于，我们使用 第 7 行 的 toggle 方法来控制 open（第 6 行），而不是直接操作它。注意我们在 第 6 行 使用 this 来访问属性。这是因为 AlpineJS 将 x-data 作为 JavaScript 对象执行。

我们还可以在 x-data 中定义 getter：

现在，x-show 依赖于 第 6 行 的 getter isOpen() 来决定是否显示可折叠内容。

处理单元素组件

单元素组件 指的是包装元素内部仅包含一个元素的情况。考虑以下示例：

它只包含一个元素：一个用于点击隐藏的按钮。在这种情况下，我们可以省去额外的标签，将 x-data 直接声明在该单一元素上：

无数据组件

有时我们的组件可能不需要任何数据。在这种情况下，可以通过不给 x-data 设置值来创建无数据组件：

我们也可以使用空对象来显式声明组件无数据：

1<div x-data="{}">
2  <!-- 一些内容 -->
3</div>

上述示例明确告诉 AlpineJS，该组件不包含任何数据。