这次我们将学习使用 alpine js 从 api 获取数据。我们将创建一个网站，显示参加英超联赛的足球俱乐部列表（取自以下 api）。
alpine js 是一个轻量级的 javascript 框架，我们可以用它来创建交互式网站，而无需使用 react 或 vue 等框架。使用 alpine js 时，我们可以轻松地将 javascript 属性直接应用到 html 文件，而无需单独编写它们。
请创建一个名为index.html的html文件，然后插入以下代码。
<meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>latihan alpine js</title><!-- import alpine js --><script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script><!-- import tailwind --><script src="https://cdn.tailwindcss.com"></script><!-- google fonts --><link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=roboto:wght@300;400;500;700&display=swap" rel="stylesheet"><style>
* {
font-family: "roboto", sans-serif;
}
</style>
接下来我们将使用 tailwind css 创建一个卡片组件。
<div class="container px-4 py-12 mx-auto">
<div class="flex flex-wrap">
<div class="lg:w-1/4 md:w-1/2 p-4 w-full">
@@##@@
<div class="mt-4">
<h2 class="text-gray-500 text-xs tracking-widest mb-1"></h2>
<h1 class="text-gray-900 text-xl font-medium"></h1>
</div>
</div>
</div>
</div>
然后我们将获取数据并将其显示在卡片组件上。
<div class="flex flex-wrap" x-data="{ teams: [] }" x-init="fetch('https://www.thesportsdb.com/api/v1/json/3/search_all_teams.php?l=English%20Premier%20League').then(response => response.json()).then(data => { teams = data.teams })">
<template x-for="team in teams"><div class="lg:w-1/4 md:w-1/2 p-4 w-full">
@@##@@
<div class="mt-4">
<h2 class="text-gray-500 text-xs tracking-widest mb-1" x-text="team.strLocation"></h2>
<h1 class="text-gray-900 text-xl font-medium" x-text="team.strTeam"></h1>
</div>
</div>
</template>
</div>
恭喜！您已成功使用 alpine js 获取 api 并将其显示给用户，以下是结果。
以下是对创建的代码的解释。
x-data 函数可以容纳 javascript 数据逻辑，以便它直接在 html 标签上运行。在此代码中，我们创建一个名为 team 的变量，其数据类型为数组。该变量旨在保存该函数中获取结果的数据。
x-init 旨在在组件加载之前执行初始化。在此代码中，我们插入一个 fetch 函数，旨在从我们之前准备的 api 端点检索数据。然后在浏览器页面显示之前，alpine js 会在后台执行一次抓取过程，然后将抓取的结果收集到一开始声明的 team 变量中。
x-for用于对teams变量进行迭代过程，然后放回team变量中
x-bind 显示图像，x-text 将数据直接打印到 html 显示中。
<img x-bind:alt="team.idTeam" class="object-cover h-56 mx-auto" x-bind:src="team.strBadge"><img src="" alt="image description" loading="lazy" style="max-width:90%">