HTMX - 属性

HTMX 属性是 htmx 的主要关键,因为它起着允许直接从 HTML 访问 AJAX、CSS 转换、WebSockets 和服务器发送事件的主要作用。因此,我们无需使用大量 JavaScript 即可构建现代 UI。

HTMX 属性的类型

HTMX 属性分为以下两部分。

  • 核心属性
  • 附加属性
此分类并非官方分类,只是为了让您的学习曲线更有趣,更容易理解每​​个属性及其用法。

HTMX 核心属性

这些是我们在使用 htmx 时经常使用的常用属性。

属性 描述
hx-get 用于触发 GET 请求到指定的 URL。
hx-post 用于触发对指定 URL 的 POST 请求。
hx-on* 用于处理元素上的内联脚本事件。
hx-push-url 用于将 URL 推送到浏览器位置栏以创建历史记录。
hx-select 用于从响应中选择要交换的内容。
hx-select-oob 用于从响应中选择要交换的内容,而不是目标(带外)。
hx-swap 控制内容如何交换(outerHTML、beforeend、afterend 等)
hx-swap-oob 用于标记要从响应(带外)交换的元素。
hx-target 用于指定要交换的目标元素。
hx-trigger 用于指定触发请求的事件。
hx-vals 用于添加要随请求一起提交的值(JSON 格式)。

HTMX 附加属性

当我们使用 htmx 时,某些属性很少使用。

属性 描述
hx-boost 用于为链接和表单添加渐进式增强。
hx-confirm 在发出请求之前显示一个确认()对话框。
hx-delete 用于触发对指定 URL 的 DELETE 请求。
hx-disable 禁用给定节点及其子节点的 htmx 处理。
hx-disabled-elt 在请求过程中将禁用属性添加到指定元素。
hx-disinherit 控制和禁用子节点的自动属性继承。
hx-encoding 更改请求编码类型。
hx-ext 用作此元素的扩展。
hx-headers 添加到将随请求提交的标头。
hx-history 用于防止敏感数据被保存到历史缓存中。
hx-history-elt 历史导航期间要快照和恢复的元素
hx-include 用于在请求中包含其他数据。
hx-indicator 请求期间放置 htmx-request 类的元素
hx-inherit 控制并启用子节点的自动属性继承(如果默认情况下已禁用)
hx-params 用于过滤将随请求提交的参数。
hx-patch 用于触发对指定 URL 的 PATCH 请求。
hx-preserve 用于指定在请求之间保持不变的元素
hx-prompt 在提交请求之前显示 prompt()。
hx-put 用于触发对指定 URL 的 PUT 请求。
hx-replace-url 用于替换浏览器位置栏中的 URL。
hx-request 用于配置请求的各个方面。
hx-sync 控制不同元素发出的请求如何同步。
hx-validate 用于强制元素在请求之前验证自身。
hx-vars 它动态地将值添加到要随请求提交的参数中(已弃用,请使用 hx-vals)。