# HOWTO: 如何学习 Alpine.js

- Link: https://www.ixiqin.com/2021/02/17/howto-how-to-learn-from-alpine-js/
- Published: 2021-02-17T14:35:53+08:00
- Author: 白宦成

文章目录

 [Toggle](https://www.ixiqin.com/2021/02/17/howto-how-to-learn-from-alpine-js/#)

 * [什么是 Alpine.js](https://www.ixiqin.com/2021/02/17/howto-how-to-learn-from-alpine-js/#%e4%bb%80%e4%b9%88%e6%98%af_alpinejs)
 * [快速学习指南](https://www.ixiqin.com/2021/02/17/howto-how-to-learn-from-alpine-js/#%e5%bf%ab%e9%80%9f%e5%ad%a6%e4%b9%a0%e6%8c%87%e5%8d%97)
    - [推荐学习路线](https://www.ixiqin.com/2021/02/17/howto-how-to-learn-from-alpine-js/#%e6%8e%a8%e8%8d%90%e5%ad%a6%e4%b9%a0%e8%b7%af%e7%ba%bf)
    - [推荐学习文档](https://www.ixiqin.com/2021/02/17/howto-how-to-learn-from-alpine-js/#%e6%8e%a8%e8%8d%90%e5%ad%a6%e4%b9%a0%e6%96%87%e6%a1%a3)
       * [1. 查阅官方文档，学习基础语法](https://www.ixiqin.com/2021/02/17/howto-how-to-learn-from-alpine-js/#1_%e6%9f%a5%e9%98%85%e5%ae%98%e6%96%b9%e6%96%87%e6%a1%a3%ef%bc%8c%e5%ad%a6%e4%b9%a0%e5%9f%ba%e7%a1%80%e8%af%ad%e6%b3%95)
       * [2. 查看常用逻辑的实现方式，比对不同](https://www.ixiqin.com/2021/02/17/howto-how-to-learn-from-alpine-js/#2_%e6%9f%a5%e7%9c%8b%e5%b8%b8%e7%94%a8%e9%80%bb%e8%be%91%e7%9a%84%e5%ae%9e%e7%8e%b0%e6%96%b9%e5%bc%8f%ef%bc%8c%e6%af%94%e5%af%b9%e4%b8%8d%e5%90%8c)
       * [3. 在线练习 Alpine.js](https://www.ixiqin.com/2021/02/17/howto-how-to-learn-from-alpine-js/#3_%e5%9c%a8%e7%ba%bf%e7%bb%83%e4%b9%a0_alpinejs)
       * [4. 查看真实项目，了解 Alpine.js](https://www.ixiqin.com/2021/02/17/howto-how-to-learn-from-alpine-js/#4_%e6%9f%a5%e7%9c%8b%e7%9c%9f%e5%ae%9e%e9%a1%b9%e7%9b%ae%ef%bc%8c%e4%ba%86%e8%a7%a3_alpinejs)
 * [Alpine.js 的学习资源汇总](https://www.ixiqin.com/2021/02/17/howto-how-to-learn-from-alpine-js/#alpinejs_%e7%9a%84%e5%ad%a6%e4%b9%a0%e8%b5%84%e6%ba%90%e6%b1%87%e6%80%bb)
    - [视频教程](https://www.ixiqin.com/2021/02/17/howto-how-to-learn-from-alpine-js/#%e8%a7%86%e9%a2%91%e6%95%99%e7%a8%8b)
    - [个人博客](https://www.ixiqin.com/2021/02/17/howto-how-to-learn-from-alpine-js/#%e4%b8%aa%e4%ba%ba%e5%8d%9a%e5%ae%a2)
    - [邮件列表](https://www.ixiqin.com/2021/02/17/howto-how-to-learn-from-alpine-js/#%e9%82%ae%e4%bb%b6%e5%88%97%e8%a1%a8)
    - [讨论区](https://www.ixiqin.com/2021/02/17/howto-how-to-learn-from-alpine-js/#%e8%ae%a8%e8%ae%ba%e5%8c%ba)
 * [一些常见问题](https://www.ixiqin.com/2021/02/17/howto-how-to-learn-from-alpine-js/#%e4%b8%80%e4%ba%9b%e5%b8%b8%e8%a7%81%e9%97%ae%e9%a2%98)
    - [1. Alpine.js 依赖 Webpack / Alpine.js 不支持 Webpack？](https://www.ixiqin.com/2021/02/17/howto-how-to-learn-from-alpine-js/#1_alpinejs_%e4%be%9d%e8%b5%96_webpack_alpinejs_%e4%b8%8d%e6%94%af%e6%8c%81_webpack%ef%bc%9f)
    - [2. Alpine.js 是为前端/后端设计的技术方案](https://www.ixiqin.com/2021/02/17/howto-how-to-learn-from-alpine-js/#2_alpinejs_%e6%98%af%e4%b8%ba%e5%89%8d%e7%ab%af%e5%90%8e%e7%ab%af%e8%ae%be%e8%ae%a1%e7%9a%84%e6%8a%80%e6%9c%af%e6%96%b9%e6%a1%88)
    - [3. Alpine.js 学习门槛如何？](https://www.ixiqin.com/2021/02/17/howto-how-to-learn-from-alpine-js/#3_alpinejs_%e5%ad%a6%e4%b9%a0%e9%97%a8%e6%a7%9b%e5%a6%82%e4%bd%95%ef%bc%9f)
 * [我自己的使用感受](https://www.ixiqin.com/2021/02/17/howto-how-to-learn-from-alpine-js/#%e6%88%91%e8%87%aa%e5%b7%b1%e7%9a%84%e4%bd%bf%e7%94%a8%e6%84%9f%e5%8f%97)

## 什么是 Alpine.js

Alpine.js 是由开发者 Caleb Porzio 开发的一款响应式前端框架。和过去人们所熟悉的 Vue.
js、React、Angular 不同的是，**Alpine.js 不需要你对于现有的应用进行高成本的改造，
也没有 VDom 的概念，直接可以在现有的系统中加入并使用**。

## 快速学习指南

Alpine.js 在国内的使用并不多，因此，相应的学习内容大多是英文写就的，不过 Alpine.
js 涉及到的概念不会像 Vue、React 之类那么多，你可以很轻松学会它。

### 推荐学习路线

Alpine.js 没有那么多的概念，因此，学习路线也非常简单，你只需要掌握以下一些内容就
可以了

 1. Alpine.js 基础语法和使用；
 2. Alpine.js 的magic helper; （非必需）
 3. Alpines.js 的状态管理工具 Spruce（非必需）

基础语法的了解可以让你使用 Alpine.js 开发自己的应用。而后面两者可以简化你的整个开发
工作流，提升自己的开发效率。

### 推荐学习文档

#### 1. 查阅官方文档，学习基础语法

学习 Alpine.js ，首先离不开的是官方文档，Alpine.js 的官方文档在其项目主页

[https://github.com/alpinejs/alpine](https://github.com/alpinejs/alpine)

如果你的英语不够好，可以看中文版本的 Readme

[https://github.com/alpinejs/alpine/blob/master/README.zh-TW.md](https://github.com/alpinejs/alpine/blob/v2.8.2/README.zh-CN.md)

具体的语法层面，我建议你按照如下的逻辑来学习

第一梯队，学习:

 * 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://postimg.aliavv.com/mbp2021/c7gdc.png)

你可以访问 [https://alpinejs.codewithhugo.com/](https://alpinejs.codewithhugo.com/)
来查看 Hugo 准备的一些案例，从而快速的了解你熟悉的功能在 Alpine.js 中的应该如何实现。

#### 3. 在线练习 Alpine.js

当你了解了一些基本的使用后，你就可以开始打开一个网页，开始自己练习使用了。

这里有两个可以在线使用的调试环境，你可以基于他们来进行练习，直接看到效果。

 * **[一个内嵌了 TailwindCSS 的练习环境](https://codepen.io/pen?template=jOPLPGX)**
 * [**一个内嵌了 Console 控制台的练习环境**](https://codepen.io/KevinBatdorf/pen/abdJGYM?editors=1010)

Alpine.js 作为一个工具，需要多练才能熟悉它的使用，配合前面看的文档和案例，现在你
就可以在这两个练习环境中练习 Alpine.js 的使用。

#### 4. 查看真实项目，了解 Alpine.js

一个工具从测试到落地到真实环境，需要的是来自真实项目的参考。而 [**Awesome**](https://github.com/alpine-collective/awesome)
中就提供了不少这样的案例。

![](https://postimg.aliavv.com/mbp2021/n8o10.png)

通过了解这些项目和工具，你可以看到别人是怎么使用 Alpine.js 的，从而学习 Alpine.js
的开发。

## Alpine.js 的学习资源汇总

Alpine.js 的学习资源不多，但有一些比较适合国内开发者看的，我也再列举一下，具体如下：

### 视频教程

 * [Building AlpineJS](https://laracasts.com/series/building-alpinejs):由 Alpine.
   js 开发者 Caleb Porzio 开设在 Laracasts 上的一门课程，介绍如何从 0 打造一个 Alpine.
   js， 这个课程会让你对于 Alpine.js 更好更快的理解。

### 个人博客

 * [Code With Hugo](https://codewithhugo.com/tags/alpinejs/): Alpine.js 核心开发
   者的博客，会更新一些关于 Alpine.js 的技术文章
 * [Alpine.js之一步一腳印](https://ithelp.ithome.com.tw/articles/10237909)：台湾
   同胞写的 Alpine.js 入门教程，有一个系列。完整的一共有30篇，可以一点点看看。

### 邮件列表

 * [Alpine.js Weekly](https://alpinejs.codewithhugo.com/newsletter/)：Alpine.js 
   Weekly 由 Alpine.js 的核心开发者 Hugo 维护，每周五发送一封邮件，介绍最新的 Alpine.
   js 社区的资源，十分值得订阅。

### 讨论区

 * [Github Discussions](https://github.com/alpinejs/alpine/discussions)
 * [Discord](https://discord.gg/snmCYk3)

## 一些常见问题

### 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 也是一个
不错的选择。