使用 Alpine JS 获取数据-js教程

首页 2024-07-11 18:58:44

这次我们将学会使用它 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&lt;a style='color:#f60; text-decoration:underline;' href=" 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&amp;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 Premier League').then(response =&gt; response.json()).then(data =&gt; { 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 并将其显示给用户，以下是结果。

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

x-data 函数可以容纳 javascript 这样它就可以直接在数据逻辑中 html 在标签上运行。在这个代码中，我们创建了一个名称 team 该变量的数据类型为数组。该变量旨在保存该函数中获得结果的数据。

x-init 它旨在在组件加载前实现初始化。在此代码中，我们插入一个 fetch 函数，旨在从我们之前准备的 api 在浏览器页面显示之前，端点检索数据。alpine js 抓取过程将在后台执行，然后将抓取结果收集到最初声明中 team 变量中。

x-for用于迭代teams变量，然后将其放回team变量中

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

以上就是使用 Alpine JS 有关获取数据的详细信息，请关注其他相关文章！

阅读全文

上一篇：未备份iPhone照片？快速恢复，有招！
下一篇：轻松掌握：视频复制粘贴技巧大揭秘！

使用 Alpine JS 获取数据-js教程

首页 2024-07-11 18:58:44

最新文章

相关文章