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-showx-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-datax-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 时,你的效率就会大大提高。

祝您编码愉快!

给TA打赏
共{{data.count}}人
人已打赏
代码技术

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

2024-5-28 19:59:44

代码技术

将 npm 注册服务引入 GitHub Codespaces

2024-5-31 13:17:07

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索