如何上手学习 Alpine.js

什么是 Alpine.js

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

快速学习指南

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

推荐学习路线

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

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

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

推荐学习文档

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

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

github.com/alpinejs/al…

如果你的英语不够好，我推荐你看台湾的开发者翻译的繁体中文版，虽然语法和用词不完全一样，但对于英语不好的开发者来说，是一个不错的补充。

github.com/alpinejs/al…

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

第一梯队，学习:

• 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 循环、抓取数据等。

你可以访问 alpinejs.codewithhugo.com/ 来查看 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 也是一个不错的选择。

原文地址: www.ixiqin.com/2021/02/how…