htmx 是 intercooler.js 的继承者

<script
  src="https://unpkg.com/htmx.org@2.0.6"
  integrity="sha384-Akqfrbj/HpNVo8k11SXBb6TlBWmXXlYQrCSqEWmyKJe+hDm3Z/B2WVG4smwBkRVm"
  crossorigin="anonymous"
>
</script>
<!-- 有一个按钮POST，通过AJAX点击 -->
<button
  hx-post="/clicked"
  hx-swap="outerHTML"
>
  点击我
</button>

hx-post 和 hx-swap 属性告诉 htmx：

当用户单击此按钮时，向 /clicked 发出 AJAX 请求，并用响应替换整个按钮

$ npm install htmx.org

安装 htmx 将导入添加到您的 index.js

import 'htmx.org';

有一个按钮，可以从 /contacts/1/edit 获取联系人的编辑 UI

<div hx-target="this" hx-swap="outerHTML">
  <div><label>名字</label>: Joe</div>
  <div><label>姓</label>: Blow</div>
  <div><label>邮箱</label>: joe@blow.com</div>
  <button hx-get="/contact/1/edit" class="btn btn-primary">
    点击编辑
  </button>
</div>

这将返回一个可用于编辑联系人的表单

<form hx-put="/contact/1" hx-target="this" hx-swap="outerHTML">
  <div>
    <label>名字</label>
    <input type="text" name="firstName" value="Joe">
  </div>
  <div class="form-group">
    <label>姓</label>
    <input type="text" name="lastName" value="Blow">
  </div>
  <div class="form-group">
    <label>邮箱</label>
    <input type="email" name="email" value="joe@blow.com">
  </div>
  <button class="btn">提交</button>
  <button class="btn" hx-get="/contact/1">取消</button>
</form> 

表单按照通常的 REST-ful 模式将 PUT 发回 /contacts/1

<table class="table delete-row-example">
  <thead>
    <tr>
      <th>Name</th> <th>Email</th> <th>Status</th> <th></th>
    </tr>
  </thead>
  <tbody hx-confirm="Are you sure?" hx-target="closest tr" hx-swap="outerHTML swap:1s">
    ...
  </tbody>
</table>

表体有一个 hx-confirm 属性来确认删除动作。 它还将所有按钮的目标设置为最近的 tr，即最近的表格行（hx-target 继承自 DOM 中的父级）hx-swap 中的交换规范表示将整个目标换出并收到响应后等待 1 秒。最后一点是为了让我们可以使用以下 CSS：

tr.htmx-swapping td {
  opacity: 0;
  transition: opacity 1s ease-out;
}

在交换/删除之前淡出该行。每行都有一个带有 hx-delete 属性的按钮，该属性包含发出 DELETE 请求以从服务器中删除该行的 url。此请求以空内容响应，表明该行应替换为空内容

<tr>
  <td>Angie MacDowell</td>
  <td>angie@macdowell.org</td>
  <td>Active</td>
  <td>
    <button class="btn btn-danger" hx-delete="/contact/1">
      Delete
    </button>
  </td>
</tr>

<div hx-get="/graph" hx-trigger="load">
  <img
    alt="正在加载中..."
    class="htmx-indicator"
    width="150"
    src="/img/bars.svg"/>
</div>

当我们加载图表时显示进度指示器。 然后通过稳定的 CSS(htmx-settling) 过渡加载图形并逐渐淡入视图

.htmx-settling img {
  opacity: 0;
}
img {
  transition: opacity 300ms ease-in;
}

:--	--
innerHTML	默认，替换目标元素的内部 html
outerHTML	用响应替换整个目标元素
beforebegin	在目标元素之前插入响应
afterbegin	目标元素的第一个子元素之前插入响应
beforeend	目标元素的最后一个子元素之后插入响应
afterend	在目标元素之后插入响应
delete	无论响应如何，都删除目标元素
none	不附加来自响应的内容 (带外项目仍将被处理)