文章
文章文档网址导航

AlpineJS框架文档：AlpineJS官网和AlpineJS教程

AlpineJS 是一个轻量级的JavaScript框架，旨在提供类似于Vue.js和React.js的声明性、反应性编程体验，但更轻量和简洁。它的设计理念是通过HTML特性来管理UI交互，适合那些不需要完整的SPA（单页应用）框架但仍希望添加一些动态交互的项目。

AlpineJS官网：https://alpinejs.dev/

AlpineJS官网入门文档：https://alpinejs.dev/start-here

Github项目网址：https://github.com/alpinejs/alpine

Intro to AlpineJS

AlpineJS的主要特点

  1. 轻量级：AlpineJS非常小巧，通常压缩后的文件大小在10KB左右。这使得它非常适合不需要复杂前端框架的小型项目。
  2. 声明性：你可以通过在HTML中添加特性来定义行为。这种方式与Vue.js的模板语法相似，但更简单直接。
  3. 反应性：AlpineJS具有反应性的数据绑定功能，可以根据数据变化自动更新DOM。
  4. 易于集成：由于其轻量级特性，AlpineJS非常容易与现有项目集成，无需进行大规模重构。

示例代码

以下是一个简单的AlpineJS示例：

html

<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/alpinejs@2.8.2" defer></script>
</head>
<body>
<div x-data="{ open: false }">
<button @click="open = !open">Toggle</button>
<div x-show="open">
This is a toggleable element.
</div>
</div>
</body>
</html>

在这个例子中：

  • x-data="{ open: false }"：定义一个组件的局部状态，初始值为open: false。
  • @click="open = !open"：使用@click绑定点击事件，点击按钮时切换open的值。
  • x-show="open"：根据open的值显示或隐藏元素。

主要功能

  1. 数据绑定：使用x-data定义组件的数据状态。
  2. 事件处理：使用@符号绑定事件，例如@click、@input等。
  3. 条件渲染：使用x-show或x-if控制元素的显示与隐藏。
  4. 循环渲染：使用x-for迭代列表。
  5. 双向绑定：使用x-model进行表单输入的双向绑定。

AlpineJS为开发者提供了一种简洁、直观的方法来添加交互行为，同时避免了引入像Vue.js或React.js这样较重的框架所带来的复杂性。它非常适合希望在现有HTML中添加一些动态特性的场景，特别是在构建原型或小型项目时。

<script src="//unpkg.com/alpinejs" defer></script> <div x-data="{ open: false }">    <button @click="open = true">Expand</button>     <span x-show="open">        Content...    </span></div>

 

简单的。

轻的。

非常强大。

Alpine 是一款坚固耐用的极简工具，可直接在标记中编写行为。您可以将其视为现代网络的 jQuery。只需添加一个脚本标记即可开始使用。

Alpine 是15 个属性、6 个特性和2 个方法 的集合。

没有比亲自看看 Alpine 更好的方式来了解它是什么以及它能做什么了：

数据为 HTML 块声明一个新的 Alpine 组件及其数据

<div x-data="{ open: false }">    ...</div>

x 绑定动态设置元素的 HTML 属性

<div x-bind:class="! open ? 'hidden' : ''">  ...</div>

x-on监听元素上的浏览器事件

<button x-on:click="open = ! open">  Toggle</button>

x-文本设置元素的文本内容

<div>  Copyright ©  <span x-text="new Date().getFullYear()"></span></div>

x-html设置元素的内部 HTML

<div x-html="(await axios.get('/some/html/partial')).data">  ...</div>

x-模型将一段数据与输入元素同步

<div x-data="{ search: '' }">  <input type="text" x-model="search">  Searching for: <span x-text="search"></span></div>

展览会切换元素的可见性

<div x-show="open">  ...</div>

x 过渡使用 CSS 过渡来过渡元素

<div x-show="open" x-transition>  ...</div>

x-for根据数据集重复 HTML 块

<template x-for="post in posts">  <h2 x-text="post.title"></h2></template>

x-如果有条件地从页面中添加或删除整个 HTML 块

<template x-if="open">  <div>...</div></template>

x-初始化当元素由 Alpine 初始化时运行代码

<div x-init="date = new Date()"></div>

x 效应每次依赖项发生变化时执行脚本

<div x-effect="console.log('Count is '+count)"></div>

交叉引用$refs使用魔法属性通过指定的键直接引用元素

<input type="text" x-ref="content"><button x-on:click="navigator.clipboard.writeText($refs.content.value)">  Copy</button>

x-cloak隐藏 HTML 块，直到 Alpine 完成其内容的初始化

<div x-cloak>  ...</div>

x-忽略防止 HTML 块被 Alpine 初始化

<div x-ignore>  ...</div>

$商店访问使用以下方式注册的全球商店Alpine.store(...)

<h1 x-text="$store.site.title"></h1>

$el引用当前 DOM 元素

<div x-init="new Pikaday($el)"></div>

$调度从当前元素发送自定义浏览器事件

<div x-on:notify="...">  <button x-on:click="$dispatch('notify')">...</button></div>

$watch观察一段数据，并在其发生变化时运行提供的回调

<div x-init="$watch('count', value => {  console.log('count is ' + value)})">...</div>

$refsx-ref通过使用指定键来引用元素

<div x-init="$refs.button.remove()">  <button x-ref="button">Remove Me</button></div>

$nextTick等到下一个“滴答”（浏览器绘制）来运行一些代码

<div  x-text="count"  x-text="$nextTick(() => {"    console.log('count is ' + $el.textContent)  })>...</div>

Alpine.data重用数据对象并使用引用它x-data

<div x-data="dropdown">  ...</div>...Alpine.data('dropdown', () => ({  open: false,  toggle() {     this.open = ! this.open  }}))

Alpine.store声明一个全局的、反应性的、可以从任何地方访问的数据，使用$store

<button @click="$store.notifications.notify('...')">  Notify</button>...Alpine.store('notifications', {  items: [],  notify(message) {     this.items.push(message)  }})

从这里开始

在您的计算机上创建一个空白 HTML 文件，其名称如下：i-love-alpine.html

使用文本编辑器，在文件中填充以下内容：

<html>
<head>
<script defer src=”https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js”></script>
</head>
<body>
<h1 x-data=”{ message: ‘I ❤️ Alpine’ }” x-text=”message”></h1>
</body>
</html>

在网络浏览器中打开您的文件，如果您看到I ❤️ Alpine，则表示您已准备好开始行动！

现在您已经准备好开始尝试了，让我们看三个实际示例，作为教您 Alpine 基础知识的基础。在本练习结束时，您应该已经具备了开始自己构建东西的条件。我们开始吧。

建立一个计数器

让我们从一个简单的“计数器”组件开始，以演示 Alpine 中状态和事件监听的基础知识，这两个核心功能。

将以下内容插入到<body>标签中：

<div x-data=”{ count: 0 }”>
<button x-on:click=”count++”>Increment</button>
<span x-text=”count”></span>
</div>
 0

现在，您可以看到，通过将 3 位 Alpine 融入到此 HTML，我们已经创建了一个交互式“计数器”组件。

让我们简单回顾一下发生的事情：

声明数据

<div x-data=”{ count: 0 }”>

Alpine 中的一切都以x-data指令开始。在 中x-data，使用纯 JavaScript，您可以声明 Alpine 将跟踪的数据对象。

此对象内的每个属性都将可供此 HTML 元素内的其他指令使用。此外，当其中一个属性发生更改时，依赖它的所有内容也会更改。

→ 详细了解x-data

让我们看看x-on它如何count从上面访问和修改属性：

监听事件

<button x-on:click=”count++”>Increment</button>

x-on是一个指令，可用于监听元素上的任何事件。在本例中，我们正在监听事件click，因此我们的指令如下所示x-on:click。

您可以按照自己想象的方式监听其他事件。例如，监听mouseenter事件的方式如下：x-on:mouseenter。

在我们的例子中，当click事件发生时，Alpine 将调用相关的 JavaScript 表达式count++。如您所见，我们可以直接访问表达式中声明的数据x-data。

您经常会看到@而不是x-on:。这是一种更简短、更友好的语法，许多人都喜欢。从现在开始，本文档可能会使用@而不是x-on:。

→ 详细了解x-on

应对变化

<span x-text=”count”></span>

x-text是一个 Alpine 指令，您可以使用它将元素的文本内容设置为 JavaScript 表达式的结果。

在这种情况下，我们告诉 Alpine 始终确保此span标签的内容反映属性的值count。

如果不清楚，x-text，像大多数指令一样接受纯 JavaScript 表达式作为参数。因此，例如，您可以将其内容设置为：x-text="count * 2"的文本内容span现在将始终是 值的 2 倍count。

→ 详细了解x-text

构建下拉菜单

现在我们已经了解了一些基本功能，让我们继续看看 Alpine 中的一个重要指令：x-show通过构建一个设计的“下拉”组件。

将以下代码插入到<body>标签中：

<div x-data=”{ open: false }”>
<button @click=”open = ! open”>Toggle</button>
<div x-show=”open” @click.outside=”open = false”>Contents…</div>
</div>

如果您加载此组件，您应该会看到“内容…”默认是隐藏的。您可以点击“切换”按钮来切换是否在页面上显示它们。

您应该熟悉前面示例中的和指令，因此我们将跳过这些解释x-data。x-on

切换元素

<div x-show=”open” …>Contents…</div>

x-show是 Alpine 中非常强大的指令，可用于根据 JavaScript 表达式的结果显示和隐藏页面上的 HTML 块，在我们的例子中：open。

→ 详细了解x-show

聆听外面的咔哒声

<div … @click.outside=”open = false”>Contents…</div>

您会注意到此示例中的一些新内容：.outside。Alpine 中的许多指令都接受链接到指令末尾并用句点分隔的“修饰符”。

在这种情况下，.outside告诉 Alpine 不要监听 内部的点击<div>，而是仅监听 外部发生的点击<div>。

这是 Alpine 内置的便捷助手，因为这是一种常见的需求，而手动实现它既烦人又复杂。

→ 阅读更多关于x-on修饰符的内容

构建搜索输入

现在让我们构建一个更复杂的组件并引入一些其他指令和模式。

将以下代码插入到<body>标签中：

<div
x-data=”{
search: ”,
items: [‘foo’, ‘bar’, ‘baz’],
get filteredItems() {
return this.items.filter(
i => i.startsWith(this.search)
)
}
}”
>
<input x-model=”search” placeholder=”Search…”>
<ul>
<template x-for=”item in filteredItems” :key=”item”>
<li x-text=”item”></li>
</template>
</ul>
</div>

  • 富
  • 酒吧
  • 巴兹

默认情况下，所有“项目”（foo、bar 和 baz）都会显示在页面上，但您可以通过在文本输入中输入内容来过滤它们。输入内容时，项目列表会发生变化以反映您要搜索的内容。

现在这里发生了很多事情，所以让我们一点一点地浏览这个片段。

多行格式

我想指出的第一件事是，x-data现在比以前多了很多内容。为了便于编写和阅读，我们在 HTML 中将其拆分为多行。这是完全可选的，稍后我们将进一步讨论如何完全避免此问题，但现在，我们将所有这些 JavaScript 直接保留在 HTML 中。

绑定到输入

<input x-model=”search” placeholder=”Search…”>

您会注意到一个我们还没有见过的新指令：x-model。

x-model用于将输入元素的值与数据属性“绑定”：x-data="{ search: '', ... }"在我们的例子中为“search”。

这意味着只要输入的值发生变化，“搜索”的值就会随之变化。

x-model其能力远不止这个简单的例子。

 

使用 getter 计算属性

接下来我想提请您注意的是指令中的items和属性。filteredItemsx-data

{
…
items: [‘foo’, ‘bar’, ‘baz’],
get filteredItems() {
return this.items.filter(
i => i.startsWith(this.search)
)
}
}

该items属性的含义应该是不言自明的。这里我们将的值设置items为包含 3 个不同项目（foo、bar 和 baz）的 JavaScript 数组。

此代码片段的有趣部分是其filteredItems属性。

get此属性的前缀表示filteredItems此对象中的“getter”属性。这意味着我们可以filteredItems像访问数据对象中的普通属性一样访问它，但当我们这样做时，JavaScript 将在后台评估所提供的函数并返回结果。

完全可以放弃get并将其作为可以从模板调用的方法，但有些人更喜欢 getter 的更好的语法。

 

现在让我们看一下filteredItemsgetter 内部并确保我们了解那里发生了什么：

return this.items.filter(
i => i.startsWith(this.search)
)

这都是纯 JavaScript。我们首先获取项目数组（foo、bar 和 baz），然后使用提供的回调过滤它们：i => i.startsWith(this.search)。

通过将此回调传递给filter，我们告诉 JavaScript 仅返回以字符串开头的项目：this.search，就像我们看到的一样，x-model它将始终反映输入的值。

您可能注意到，到目前为止，我们还没有使用this.来引用属性。但是，因为我们直接在对象内部工作x-data，所以必须使用 来引用任何属性，this.[property]而不是简单地使用[property]。

因为 Alpine 是一个“反应式”框架。任何时候值this.search发生变化时，模板使用的部分filteredItems都会自动更新。

循环元素

现在我们了解了组件的数据部分，让我们了解模板中发生了什么，使我们能够filteredItems在页面上循环。

<ul>
<template x-for=”item in filteredItems”>
<li x-text=”item”></li>
</template>
</ul>

这里要注意的第一件事是x-for指令。x-for表达式采用以下形式：[item] in [items]其中 [items] 是任何数据数组，[item] 是将分配给循环内迭代的变量的名称。

还要注意的是x-for是在元素上声明的<template>，而不是直接在 上声明的<li>。这是使用 的要求。它允许 Alpine 利用浏览器中标签x-for的现有行为来发挥其优势。<template>

现在，标签内的任何元素<template>都将对其中的每个项目重复filteredItems，并且循环内评估的所有表达式都将直接访问迭代变量（item在本例中）。

 

回顾

如果您已经做到了这一点，那么您已经接触过 Alpine 中的以下指令：

  • 数据
  • x-on
  • x-文本
  • 展览会
  • x-模型
  • x-for

这是一个很好的开始，但是，还有更多的指令需要你去理解。理解 Alpine 的最好方法是通读这份文档。不需要仔细阅读每一个字，但如果你至少浏览一下每一页，那么在使用 Alpine 时，你的效率就会大大提高。

祝您编码愉快！

AlpineJSAlpineJS好用吗AlpineJS官网AlpineJS怎么样AlpineJS性能AlpineJS是什么AlpineJS框架https://alpinejs.dev/
科技

JavaScript 生成颜色的代码和原理：JS生成颜色的代码大全

2024-5-28 19:59:44

科技

将 npm 注册服务引入 GitHub Codespaces

2024-5-31 13:17:07

❯
搜索

  • 扫码打开当前页

返回顶部