如何上手學習 Alpine.js

什麼是 Alpine.js

Alpine.js 是由開發者 Caleb Porzio 開發的一款響應式前端框架。和過去人們所熟悉的 Vue.js、React、Angular 不一樣的是，Alpine.js 不須要你對於現有的應用進行高成本的改造，也沒有 VDom 的概念，直接能夠在現有的系統中加入並使用。

快速學習指南

Alpine.js 在國內的使用並很少，所以，相應的學習內容大可能是英文寫就的，不過 Alpine.js 涉及到的概念不會像 Vue、React 之類那麼多，你能夠很輕鬆學會它。

推薦學習路線

A#lpine.js 沒有那麼多的概念，所以，學習路線也很是簡單，你只須要掌握如下一些內容就能夠了

• Alpine.js 基礎語法和使用；
• Alpine.js 的magic helper; （非必需）
• Alpines.js 的狀態管理工具 Spruce（非必需）

基礎語法的瞭解可讓你使用 Alpine.js 開發本身的應用。然後面二者能夠簡化你的整個開發工做流，提高本身的開發效率。

推薦學習文檔

1. 查閱官方文檔，學習基礎語法

學習 Alpine.js ，首先離不開的是官方文檔，Alpine.js 的官方文檔在其項目主頁

https://github.com/alpinejs/a...

若是你的英語不夠好，我推薦你看臺灣的開發者翻譯的繁體中文版，雖然語法和用詞不徹底同樣，但對於英語很差的開發者來講，是一個不錯的補充。

https://github.com/alpinejs/a...

此外，國內開發者還有在本身的博客上翻譯簡體中文版本，但未經官方承認，因此你們看的時候注意一下版本問題。

具體的語法層面，我建議你按照以下的邏輯來學習

第一梯隊，學習:

• x-data：教你如何組織你的 Alpine.js 代碼
• x-on：事件綁定
• x-if：邏輯處理
• x-for：列表渲染
• x-bind：數據綁定
• x-model：雙向數據綁定

這六個語法讓你能夠基本開始使用 Alpine.js。

第二梯隊，學習：

• x-show：控制是否顯示
• x-spread：將 Alpine.js 對象屬性綁定到 Object 上
• x-text：控制元素內文字
• x-html：控制元素內 Html
• x-transition：控制轉場漸變更畫

這五個語法讓你的 Alpine.js 項目擁有更多的功能

第三梯隊，學習：

• x-cloak：控制組件初始化完成
• x-ref：綁定父組件對象
• $el：獲取元素
• $refs：獲取父組件對象中標註的 x-ref
• $event：事件對象
• $dispatch：觸發事件
• $nextTick：下次 DOM 更新
• $watch：監聽數據變化

上述這些語法可讓你更加深刻的使用 Alpine.js，不過在不少場景下可能你都用不到，因此也無需擔憂。

2. 查看經常使用邏輯的實現方式，比對不一樣

Hugo 是 Alpine.js 的開發團隊成員之一，除了開發之外，Hugo 還在本身的網站上給出了一個 Playground ，你能夠在這裏看到一些 Alpine.js 的常見用例，好比：數據綁定、 for 循環、抓取數據等。

你能夠訪問 https://alpinejs.codewithhugo... 來查看 Hugo 準備的一些案例，從而快速的瞭解你熟悉的功能在 Alpine.js 中的應該如何實現。

3. 在線練習 Alpine.js

當你瞭解了一些基本的使用後，你就能夠開始打開一個網頁，開始本身練習使用了。

這裏有兩個能夠在線使用的調試環境，你能夠基於他們來進行練習，直接看到效果。

• 一個內嵌了 TailwindCSS 的練習環境
• 一個內嵌了 Console 控制檯的練習環境

Alpine.js 做爲一個工具，須要多練才能熟悉它的使用，配合前面看的文檔和案例，如今你就能夠在這兩個練習環境中練習 Alpine.js 的使用。

4. 查看真實項目，瞭解 Alpine.js

一個工具從測試到落地到真實環境，須要的是來自真實項目的參考。而 Awesome 中就提供了很多這樣的案例。

經過了解這些項目和工具，你能夠看到別人是怎麼使用 Alpine.js 的，從而學習 Alpine.js 的開發。

Alpine.js 的學習資源彙總

Alpine.js 的學習資源很少，但有一些比較適合國內開發者看的，我也再列舉一下，具體以下：

視頻教程

• Building AlpineJS:由 Alpine.js 開發者 Caleb Porzio 開設在 Laracasts 上的一門課程，介紹如何從 0 打造一個 Alpine.js， 這個課程會讓你對於 Alpine.js 更好更快的理解。

我的博客

• Code With Hugo: Alpine.js 核心開發者的博客，會更新一些關於 Alpine.js 的技術文章
• Alpine.js之一步一腳印：臺灣同胞寫的 Alpine.js 入門教程，有一個系列。完整的一共有30篇，能夠一點點看看。

郵件列表

• Alpine.js Weekly：Alpine.js Weekly 由 Alpine.js 的核心開發者 Hugo 維護，每週五發送一封郵件，介紹最新的 Alpine.js 社區的資源，十分值得訂閱。

討論區

• Github Discussions
• Discord

一些常見問題

1. Alpine.js 依賴 Webpack / Alpine.js 不支持 Webpack？

答：並非，Alpine.js 能夠在 webpack 中使用，也能夠不在 Webpack 中使用。即便經過 webpack 構建，Alpine.js 也會自動綁定對象，方便你使用。

2. Alpine.js 是爲前端/後端設計的技術方案

答：Alpine.js 並非爲某一類人設計的技術方案。雖然在我看來，他對於後端十分友好，由於不須要 webpack 之類的前端構建工具就可使用，但若是你是前端，且不太喜歡 React 的 JSX 或者是 Vue 的template ，那依然能夠選擇使用 Alpine.js。

3. Alpine.js 學習門檻如何？

Alpine.js 的學習只須要掌握一些核心的語法，就能夠正式開始使用了。相比於 Vue、React， 我認爲學習成本仍是要低一些的。Vue 有完整的工具鏈，放平緩了學習曲線，但須要學習的概念依然很多，只是上手難度低而已。

我本身的使用感覺

Alpine.js 在我看來，是對於後端開發者的利器。他的語法足夠簡單， 也不須要打包，所以對於後端開發者來講，能夠十分方便的在系統中接入。同時，Alpine.js 能夠很好的與傳統的服務端渲染的邏輯結合，使用服務端渲染內容，使用 Alpine.js 來控制內容，從而能夠很好的完成頁面的構建，實如今不過多提高項目複雜度的同時，提高了頁面的動態效果和邏輯編寫難度，對於後端開發者來講，是一個不錯的工具。

對於前端開發者來講，若是你厭惡了每次寫項目都須要構建、打包，那麼 Alpine.js 也是一個不錯的選擇。

原文地址:https://www.ixiqin.com/2021/0...