# 輕量化前端組合技：htmx 與 Alpine.js 開發應用 - 張珈寧(Ning)

{%hackmd @HWDC/BJOE4qInR %}

>#### 》[議程介紹](https://hwdc.ithome.com.tw/2024/session-page/3182)
>#### 》[填寫議程滿意度問卷｜回饋建言給辛苦的講者](https://forms.gle/Xq63zXgmdWP6BZQ97)

## htmx

- HTTP request
- HTML只支援Post/Get 方法
- 發送request 後 需整頁替換
- 只有a與form表單可以處理HTTP request
- 只有click / submit 可以觸發

### htmx - ajax

在一般的element tag即可用以下的方法
| 屬性 | 描述 |
|------------|-----------------------------------|
| `hx-get` | 發出GET請求到指定的URL |
| `hx-post` | 發出POST請求到指定的URL |
| `hx-put` | 發出PUT請求到指定的URL |
| `hx-patch` | 發出PATCH請求到指定的URL |
| `hx-delete`| 發出DELETE請求到指定的URL |

[htmx-ajax](https://htmx.org/docs/#ajax)

### htmx - swap
| 名稱 | 描述 |
|----------------|----------------------------------------------------------------------------|
| `innerHTML` | 預設選項，將內容放置於目標元素內部。 |
| `outerHTML` | 替換整個目標元素與返回的內容。 |
| `afterbegin` | 在目標元素內部的第一個子元素之前插入內容。 |
| `beforebegin` | 在目標元素所在父元素中，目標元素之前插入內容。 |
| `beforeend` | 在目標元素內部的最後一個子元素之後插入內容。 |
| `afterend` | 在目標元素所在父元素中，目標元素之後插入內容。 |
| `delete` | 不管返回什麼響應，都刪除目標元素。 |
| `none` | 不將返回的內容附加到任何地方（但仍將處理“Out of Band Swaps”和響應頭）。 |

[htmx-swap](https://htmx.org/docs/#swapping)

## Alpine.js

[alpine.js x-data](https://alpinejs.dev/directives/data)

---
[講者 Blog](https://ninglab.com/)