在您的 HTML 文件中直接使用 JavaScript 框架的强大功能！

框架被高估了，让我们使用 HTML！

简介

玩笑归玩笑，这个博客是关于 另一个 JavaScript 框架但有一点不同，您不必制作这些.js文件即可使用它，它可以直接与您的 HTML 集成！;)

好奇吗？我说的可是alpineJS！Alpine 的创始人Caleb说道：“我希望你觉得 Alpine 是一股清风，是喧嚣中的静谧。” AlpineJS 旨在为开发者提供一个简洁、轻量且强大的 JavaScript 框架。

AlpineJS 可以通过 CDN 或安装 NPM 包来使用，但在本博客中，我们将仅讨论 CDN 方法，因为我们的目标是将其与 HTML 文件一起使用。让我们从使用 AlpineJS 构建经典的 ToDo 应用开始吧！

使用 Alpine 的 ToDo 应用

让我们首先创建一个 HTML 文件并放入基本的 HTML 样板。

我们需要做的第一件事是在我们的 html 文件中导入 alpinejs，这可以通过在我们的 Head 标签中添加一个脚本标签来完成，如下所示。

待办事项应用需要三个基本要素：当前待办事项文本、一个包含所有待办事项的数组以及待办事项处理函数。首先，我们来定义待办事项的变量。要在 alpineJS 中为作用域定义变量，需要使用x-dataalpine 提供的指令。x-data将一段 HTML 代码定义为 Alpine 组件，并提供该组件所需的响应式数据。我的代码如下：

注意，你必须使用this来访问方法内部的数据。函数逻辑比较简单，我就不赘述了。我们先从创建待办事项应用开始。我们需要一个输入区域、一个添加待办事项的按钮和一个待办事项列表，每个待办事项都有一个移除按钮。开始吧！

现在，让我们尝试理解代码；）
您首先看到的是一个带有x-model指令的输入标签，其值等于todoEl我们在指令中定义的值x-data。x-model允许您将输入元素的值绑定到给定变量，它会自动查找输入值的变化并相应地更改变量！

第二个标签是一个带有@click指令的按钮，Alpine 允许你使用它@来代替x-on:指令，指令主要用于监听 DOM 事件，例如点击、更改、鼠标事件等等。你可以看到，它@click已经与addTodo我们的 方法绑定了x-data。所以每次有人点击按钮时，它都会将输入文本todos以字符串的形式添加到我们的数组中！

现在到了最后一部分，我们使用无序列表标签或标签来显示待办事项列表<ul>。标签内部包含一个带有指令和键的template标签。指令允许您通过迭代列表来创建 DOM 元素，因此我们基本上是迭代数组中的所有待办事项来显示它们。另请注意，Alpine 的指令只能在模板标签上使用，不能直接在标签上使用它。它提供了两个参数：待办事项元素的索引和字符串形式的待办事项文本。x-forx-fortodosx-forlix-for="(todo, index) in todos"

在其中，我们添加了另一个 div，其中包含一个<li>标签和一个用于移除待办事项的按钮。li 标签使用x-text指令来设置其值，这是 alpine 提供的另一个便捷指令。移除按钮@click与添加待办事项按钮具有相同的指令，它绑定到removeTodo函数。

这就是使用 alpine 构建基本待办事项应用程序所需的全部内容，在向页面添加一些样式后，它看起来像这样👇

源代码：https://gist.github.com/asheeeshh/f2dd43138bf66531d588b9b01e3d4737

提示：尝试自己添加标记为完成按钮，alpine 文档对初学者非常友好，如果您仍然遇到任何问题或有任何疑问，请随时在下面的评论中询问我。

感谢阅读！

🍕给我买一片披萨！