这次我们将学习使用 Alpine JS 从 API 获取数据。我们将创建一个网站，显示参加英超联赛的足球俱乐部列表（取自以下 API）。

Alpine JS 是一个轻量级的 Javascript 框架，我们可以用它来创建交互式网站，而无需使用 React 或 Vue 等框架。使用 Alpine JS 时，我们可以轻松地将 Javascript 属性直接应用到 HTML 文件中，而无需单独编写它们。

请创建一个名为 index.html 的 HTML 文件，然后粘贴以下代码。

接下来我们将使用 Tailwind CSS 创建一个卡片组件。

然后我们将获取数据并将其显示在卡片组件上。

快乐的！您已成功使用 Alpine JS 获取 API 并将其显示给用户，以下是结果。

以下是对创建的代码的解释。

x-data 函数可容纳 Javascript 数据逻辑直接在 HTML 标签上运行。在此代码中，我们创建一个名为 team 的变量，其数据类型为数组。该变量旨在保存函数中获取结果的数据。

x-init旨在在组件加载之前执行初始化。在此代码中，我们插入一个 fetch 函数，旨在从我们之前准备的 API 端点检索数据。然后在浏览器页面显示之前，Alpine JS会在后台执行一次抓取过程，然后抓取的结果会被收集到开头声明的teams变量中。

x-for用于对teams变量进行迭代过程，然后放回team变量中。

x-bind 显示图像，x-text 将数据直接打印到 HTML 显示中。