因为 htmx 虽然标准情况下只需要引用一个 JS 脚本文件，但这个文件即使使用 min 版本大小也有约 17KB，在网页加载中也会在一定程度上影响性能。于是我就使用了最常用的解决方法：在引用 JS 脚本文件的代码中加了 defer 。 在大部分场景中这个做法都没什么问题，直到需要在页面加载时自动通过 hx-trigger = "load" 来加载某些内容时出现了问题。

HTMX 官网虽然把每一个 HTMX 属性、事件等都介绍了一遍，但实际上没有介绍每个属性、事件等在开发过程中的一些技术细节，例如：放置的位置、不同场景发生的顺序等。所以很多人在使用过程，就会写出上面这样的代码。以上的代码在实际环境中测试一下，发现是没问题的，但在没有完全弄懂 hx-on::after-swap 的使用场景的情况下会很容易出现捕获不到事件的问题。本文教你如何正确使用 hx-on::after-swap 事件。

HTMX 实战教程：演示如何在使用 hx-get 及 hx-post 发送请求时，同时隐藏或操作页面 DOM 元素。典型场景包括：点击菜单加载新页面，同时关闭弹出菜单；点击按钮加载数据，同时隐藏 loading 面板；点击链接加载内容，同时关闭模态弹窗等。本文提供 onclick、HTMX 事件两种实现方式。

数据的增删查改是系统开发最常见的功能，使用 HTMX 可以轻松实现相关功能。因为 HTMX 的亮点是实现 HTML 片段的交换，可以与以往的系统开发设计理念不同的是，使用 HTMX 实现增删查改功能时需要规划好 HTML 文件的拆分，尽量避免重复维护的麻烦。 这里给出一个参考的文件拆分规划：默认的数据浏览页面 index.html；返回查询结果的 HTML 片段 items.html；编辑页面 editor.html。

hx-vals hx-vals 属性允许你添加将随 AJAX 请求提交的参数。默认情况下，此属性的值是 JSON 格式。如果你希望 hx-vals 解析给定的值，则可以在值前面加上 javascript: 或 js:。 在 HTMX 官方文档中，关于 hx-vals 的用法就只有简简单的几句话跟寥寥几行代码的示例，照搬官网的示例代码确实是可以用的，但在实际使用过程中发现有一些高级用法以及隐藏的坑是没有被提及的。在这篇文章中就为大家详细解读一下 hx-vals 这个属性。 hx-vals 隐藏的坑 hx-vals 格式 hx-vals 在官方上提到该属性的值是 JSON 格式，但实际上向后台提交