htmx 简介

htmx 是一个库，允许您直接从 HTML 访问现代浏览器功能，而不是使用 javascript。

为了理解 htmx，首先我们来看一下锚标签：

<a href="/blog">Blog</a>

这个锚标记告诉浏览器：

“当用户点击此链接时，向‘/blog’发出 HTTP GET 请求，并将响应内容加载到浏览器窗口中”。

考虑到这一点，请考虑以下 HTML：

<button hx-post="/clicked"
    hx-trigger="click"
    hx-target="#parent-div"
    hx-swap="outerHTML">
    Click Me!
</button>

这告诉 htmx：

parent-div“当用户点击此按钮时，向 '/clicked' 发出 HTTP POST 请求，并使用响应中的内容替换DOM 中具有 id 的元素”

htmx 扩展并概括了 HTML 作为超文本的核心思想，直接在语言内部开辟了更多的可能性：

• 现在任何元素（不仅仅是锚点和表单）都可以发出 HTTP 请求
• 现在，任何事件（不仅仅是点击或表单提交）都可以触发请求
• 现在可以使用任何HTTP 动词，而不仅仅是GETandPOST
• 现在，任何元素（而不仅仅是整个窗口）都可以成为请求更新的目标

请注意，当您使用 htmx 时，在服务器端您通常使用HTML而不是JSON进行响应。这让您牢牢地保持在原始的 Web 编程模型中，使用超文本作为应用程序状态的引擎， 甚至不需要真正理解这个概念。

值得一提的是，如果你愿意，你可以data-在使用 htmx 时使用前缀：

<a data-hx-post="/click">Click Me!</a>

最后， htmx 1.0版本依然受支持，并且支持IE11。

1.x 到 2.x 迁移指南

如果您要从htmx 1.x 迁移到 htmx 2.x ，请参阅 htmx 1.x 迁移指南。

如果您要从 intercooler.js 迁移到 htmx，请参阅 intercooler 迁移指南。