這次我們將學習使用 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 顯示中。