头图

如何上手学习 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...

阅读 413

西秦公子

1.2k 声望
2.6k 粉丝
0 条评论

西秦公子

1.2k 声望
2.6k 粉丝
宣传栏