使用 Alpine JS 获取数据-码农资源网

这次我们将学习使用 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.tailwind<a%20style='color:#f60;%20text-decoration:underline;'%20href=" https: target="_blank">css.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">
      <img alt="logo" class="object-cover h-56 mx-auto" src=""><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">
      <img x-bind:alt="team.idTeam" class="object-cover h-56 mx-auto" x-bind:src="team.strBadge"><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 并将其显示给用户，以下是结果。

image description