![\"\"](\"https:\/\/s5.51cto.com\/oss\/202210\/20\/28570d595ab4e64e2d01412fdf47aa03a56832.png\")
<\/div><\/p>\n\u524d\u7aef\u9886\u57df\u8fd9\u51e0\u5e74\u6d8c\u73b0\u4e86\u5f88\u591a\u65b0\u5174\u7684\u524d\u7aef\u6846\u67b6\uff0c\u6bd4\u5982Qwik\u200b\u3001Svelte\u200b\u3001Astro\u7b49\u3002<\/p>\n
\u8fd9\u4e9b\u6846\u67b6\u591a\u4ee5\u300c\u524d\u7aef\u5de5\u7a0b\u5e08\u300d\u4f5c\u4e3a\u53d7\u4f17\u3002<\/p>\n
\u90a3\u4e48\uff0c\u4ee5\u300c\u540e\u7aef\u5de5\u7a0b\u5e08\u300d\u4f5c\u4e3a\u53d7\u4f17\u7684\u524d\u7aef\u6846\u67b6\u662f\u5565\u6837\u7684\uff0c\u4ed6\u4e0e\u524d\u8005\u6709\u4ec0\u4e48\u533a\u522b\u5462\uff1f<\/p>\n
<\/span><\/a>\u4ecb\u7ecdhtmx<\/h2>\nhtmx\u200b\u662f\u4e00\u6b3e\u5728Django\u6280\u672f\u6808\u6700\u8fd1\u6bd4\u8f83\u70ed\u95e8\u7684\u524d\u7aef\u6846\u67b6\u3002<\/p>\n
\u4ed6\u7684\u7406\u5ff5\u662f \u2014\u2014\u00a0\u300c\u8ba9\u7f51\u9875\u56de\u5f52HTML\u7684\u672c\u8d28\uff0c\u4e0d\u518d\u53d7JS\u675f\u7f1a\u300d\u3002\u662f\u4e0d\u662f\u5f88\u6709web1.0\u7684\u98ce\u683c\uff1f<\/p>\n
\u4ed6\u662f\u600e\u4e48\u505a\u5230\u7684\u5462\uff1f\u7b54\u6848\u662f\uff1a\u901a\u8fc7\u5927\u91cf\u9884\u5236\u7684\u81ea\u5b9a\u4e49HTML\u5c5e\u6027\u3002<\/p>\n
\u5f53\u4f60\u5728\u9875\u9762\u4e2d\u5f15\u5165htmx.org.js\u200b\u540e\uff0c\u53ef\u4ee5\u5728HTML\u200b\u4e2d\u4e66\u5199\u4ee5hx-\u5f00\u5934\u7684\u81ea\u5b9a\u4e49\u5c5e\u6027\u3002\u6bd4\u5982\u4e0b\u9762\u7684\u4ee3\u7801\uff1a<\/p>\n
\u590d\u5236<\/p>\n
<button \n hx-post="\/data"\n hx-trigger="click"\n>\n \u70b9\u6211\u8bf7\u6c42data\n<\/button>\n<\/code><\/pre>\n\u70b9\u51fb\u6309\u94ae\uff08hx-trigger\u6307\u5b9a\u7684click\u4e8b\u4ef6\uff09\u540e\uff0c\u4f1a\u5411data\u63a5\u53e3\uff08hx-post\u6307\u5b9a\uff09\u53d1\u8d77post\u8bf7\u6c42\u3002<\/p>\n
\u90a3\u8bf7\u6c42\u8fd4\u56de\u7684\u6570\u636e\u5982\u4f55\u663e\u793a\u5462\uff1f\u6211\u4eec\u518d\u589e\u52a02\u4e2a\u81ea\u5b9a\u4e49\u5c5e\u6027\uff1a<\/p>\n
\u590d\u5236<\/p>\n
<button \n hx-post="\/data"\n hx-trigger="click"\n hx-target="#parent-div"\n hx-swap="outerHTML"\n>\n \u70b9\u6211\u8bf7\u6c42data\n<\/button>\n<\/code><\/pre>\nhx-target\u6307\u4ee3\u300c\u8fd4\u56de\u7684HTML\u7ed3\u6784\u300d\u4f1a\u88ab\u6ce8\u5165\u5230\u54ea\u91cc\u3002\u8fd9\u91cc\u4f1a\u88ab\u6ce8\u5165\u5230\u300cid\u4e3aparent-div\u7684DOM\u300d\u4e2d\u3002<\/p>\n
hx-swap\u6307\u4ee3\u300c\u8fd4\u56de\u7684HTML\u7ed3\u6784\u4f1a\u4ee5\u4ec0\u4e48\u5f62\u5f0f\u6ce8\u5165\u300d\u3002\u8fd9\u91cc\u4f1a\u76f4\u63a5\u66ff\u6362\u300cid\u4e3aparent-div\u7684DOM\u300d\u3002<\/p>\n
\u5982\u679chx-swap="innerHTML"\u200b\uff0c\u5219\u4ee3\u8868\u4f1a\u4ee5\u300cid\u4e3aparent-div\u7684DOM\u300d\u7684innerHTML\u5f62\u5f0f\u6ce8\u5165\u3002<\/p>\n
\u5982\u679c\u8981\u8868\u8fbe\u590d\u6742\u7684\u903b\u8f91\uff0c\u9700\u8981\u7ed3\u5408\u5f88\u591a\u81ea\u5b9a\u4e49\u5c5e\u6027\u4e0e\u5c5e\u6027\u503c\uff0c\u6bd4\u5982\u4e0b\u9762\u7684\u4ee3\u7801\uff1a<\/p>\n
\u590d\u5236<\/p>\n
<input \n type="text"\n hx-get="\/trigger_delay"\n hx-trigger="keyup changed delay:500ms"\n hx-target="#search-results"\n placeholder="Search..."\n>\n<\/code><\/pre>\n\u5f53input\u200b\u89e6\u53d1keyup\u200b\u4e8b\u4ef6\u4e14\u503c\u6539\u53d8\u540e\uff0c\u5ef6\u8fdf500ms\uff0c\u5411trigger_delay\u200b\u63a5\u53e3\u53d1\u8d77\u8bf7\u6c42\uff0c\u8fd4\u56de\u7684HTML\u7ed3\u6784\u88ab\u6ce8\u5165\u5230\u300cid\u4e3asearch-results\u7684DOM\u300d\u4e2d\u3002<\/p>\n
\u4e0e\u5176\u8bf4htmx\u662f\u4e00\u6b3e\u524d\u7aef\u6846\u67b6\uff0c\u66f4\u8d34\u5207\u7684\u8bf4\uff0c\u4ed6\u5e94\u8be5\u662f\u4e00\u6b3e\u300cHTML\u81ea\u5b9a\u4e49\u5c5e\u6027\u5de5\u5177\u5e93\u300d\u3002<\/p>\n
\u4ed6\u5c06\u5f88\u591a\u5e38\u89c1JS\u200b\u4ea4\u4e92\u903b\u8f91\u6536\u655b\u5230\u81ea\u5b9a\u4e49HTML\u200b\u5c5e\u6027\u4e2d\uff0c\u501f\u6b64\u51cf\u5c11JS\u4ee3\u7801\u91cf\u3002<\/p>\n
\u73b0\u4ee3\u524d\u7aef\u6846\u67b6\u901a\u5e38\u662f\u300c\u72b6\u6001\u9a71\u52a8UI\u300d\uff0c\u800chtmx\u200b\u7684\u7406\u5ff5\u662f\u300c\u8fc7\u7a0b\u9a71\u52a8UI\u300d\uff08\u7c7b\u4f3cjQuery\u65f6\u4ee3\u7f16\u5199\u9875\u9762\u7684\u65b9\u5f0f\uff09\u3002<\/p>\n
\u5982\u679c\u5e0c\u671b\u5f15\u5165\u72b6\u6001\uff0c\u9700\u8981\u4ee5\u63d2\u4ef6\u7684\u5f62\u5f0f\u5f15\u5165alpine-morph\u3002<\/p>\n
\u76f8\u6bd4\u4e8e\uff1a<\/p>\n
\n- React\uff1a\u57fa\u4e8eJSX\u3002<\/li>\n
- Vue\uff1a\u57fa\u4e8e\u6a21\u7248\u8bed\u6cd5\u3002<\/li>\n<\/ul>\n
alpine\u200b\u662f\u4e00\u6b3e\u57fa\u4e8eHTML\u7684\u524d\u7aef\u6846\u67b6\u3002<\/p>\n
\u8fd9\u610f\u5473\u7740\u4f7f\u7528alpine\u200b\u9700\u8981\u76f4\u63a5\u5728HTML\u200b\u4e2d\u4ee5\u81ea\u5b9a\u4e49\u5c5e\u6027\u7684\u5f62\u5f0f\u4e66\u5199\u72b6\u6001\uff08\u4e0eVue v1\u200b\u7c7b\u4f3c\uff09\u3002\u6240\u4ee5\uff0c\u4ed6\u80fd\u5f88\u597d\u7684\u878d\u5165htmx\u7684\u4f53\u7cfb\u4e2d\u3002<\/p>\n
\u6bd4\u5982\u4e0b\u9762\u8fd9\u6bb5\u4ee3\u7801\u662f\u6bb5\u7ed3\u5408htmx\u4e0ealpine\u7684HTML\u200b\uff0c\u5176\u4e2d\u4ee5hx-\u200b\u5f00\u5934\u7684\u662fhtmx\u200b\u5c5e\u6027\uff0c\u4ee5x-\u200b\u5f00\u5934\u7684\u662falphine\u5c5e\u6027\uff1a<\/p>\n
\u590d\u5236<\/p>\n
<div hx-target="this" hx-ext="alpine-morph" hx-swap="morph">\n <div x-data="{ count: 0, replaced: false, \n message: 'Change me, then press the button!' }">\n <input type="text" x-model="message">\n <div x-text="count"><\/div>\n <button x-bind:style="replaced && {'backgroundColor': '#fecaca'}" \n x-on:click="replaced = true; count++" \n hx-get="\/swap">\n Morph\n <\/button>\n <\/div>\n<\/div>\n<\/code><\/pre>\n\u8fd9\u6bb5\u4ee3\u7801\u5305\u542b\u4e86\u4ea4\u4e92\u903b\u8f91\u4e0e\u524d\u7aef\u72b6\u6001\uff0c\u6700\u91cd\u8981\u7684\u662f\uff1a\u4ed6\u662f\u5408\u6cd5\u7684HTML\uff08\u800c\u4e0d\u662fJSX\u6216\u6a21\u7248\u8bed\u6cd5\u8fd9\u6837\u7684DSL\uff09\uff0c\u8fd9\u610f\u5473\u7740\u4ed6\u80fd\u8f7b\u677e\u7684\u5728\u524d\u540e\u7aef\u4e4b\u95f4\u4f20\u9012\uff0c\u5e76\u5728\u524d\u7aef\u5c55\u793a\u3002<\/p>\n
<\/span><\/a>\u4ea4\u4e92\u903b\u8f91\u5b88\u6052<\/h2>\n\u672c\u8d28\u6765\u8bf4\uff0c\u7f51\u9875\u7684\u6700\u7ec8\u6d88\u8d39\u54c1\u662fHTML\u4e0eCSS\u200b\u3002\u5f00\u53d1\u8005\u7f16\u5199\u4ea4\u4e92\u903b\u8f91\u6539\u53d8HTML\u4e0eCSS\u3002<\/p>\n
\u524d\u7aef\u5de5\u7a0b\u5e08\u4e60\u60ef\u5728\u7f51\u9875\u4e2d\u901a\u8fc7JS\u7f16\u5199\u4ea4\u4e92\u903b\u8f91\u3002<\/p>\n
\u540e\u7aef\u5de5\u7a0b\u5e08\u4e60\u60ef\u5728\u540e\u7aef\u7f16\u5199\u4ea4\u4e92\u903b\u8f91\u3002\u6bd4\u5982\u5728htmx\u200b\u4e2d\uff0c\u8bf7\u6c42\u8fd4\u56de\u7684\u662fHTML\u200b\u7ed3\u6784\uff0c\u8fd9\u90e8\u5206\u300c\u751f\u6210HTML\u7684\u903b\u8f91\u300d\u662f\u5728\u540e\u7aefcontroller\u200b\u4e2d\u5b9e\u73b0\u7684\uff08\u800c\u4e0d\u662f\u5728\u524d\u7aef\u901a\u8fc7JS\u751f\u6210\uff09\u3002<\/p>\n
\u9664\u6b64\u4e4b\u5916\uff0c\u8fd8\u6709\u4e00\u90e8\u5206\u4ea4\u4e92\u903b\u8f91\u662f\u5728\u540e\u7aef\u300cHTML\u6a21\u7248\u300d\u4e2d\u4ea7\u751f\u7684\u3002\u4e0b\u56fe\u662fDjango\u200b\u4e2d\u7ed3\u5408htmx\u7684\u540e\u7aef\u6a21\u7248\u4ee3\u7801\u793a\u4f8b\uff1a<\/p>\n
![\"\u56fe\u7247\"](\"data:image\/svg+xml;base64,PCEtLUFyZ29uTG9hZGluZy0tPgo8c3ZnIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgc3Ryb2tlPSIjZmZmZmZmMDAiPjxnPjwvZz4KPC9zdmc+\" "\\"\u56fe\u7247\\"")
<\/div><\/p>\n\u4e0d\u7ba1\u4ea4\u4e92\u903b\u8f91\u5728\u524d\u7aef\u8fd8\u662f\u540e\u7aef\u5b9e\u73b0\uff0c\u4e5f\u4e0d\u7ba1\u7528\u54ea\u79cd\u8bed\u8a00\u5b9e\u73b0\uff0c\u4ed6\u662f\u4e00\u5b9a\u9700\u8981\u5b9e\u73b0\u7684\uff0c\u4e5f\u5c31\u662f\u8bf4\u300c\u4ea4\u4e92\u903b\u8f91\u5b88\u6052\u300d\u3002<\/p>\n
\u4f46\u662f\uff0c\u4ea4\u4e92\u903b\u8f91\u5728\u524d\u7aef\u8fd8\u662f\u540e\u7aef\u5b9e\u73b0\uff0c\u5bf9\u9875\u9762\u5e26\u6765\u7684\u5f71\u54cd\u662f\u4e0d\u540c\u7684\u3002<\/p>\n
<\/span><\/a>\u5bf9\u9875\u9762\u6027\u80fd\u7684\u5f71\u54cd<\/h2>\n\u4ea4\u4e92\u903b\u8f91\u5728\u524d\u7aef\u5b9e\u73b0\u7684\u8d8a\u591a\uff0c\u610f\u5473\u7740\u300c\u8d8a\u591a\u7684JS\u4ee3\u7801\u300d\uff0c\u5982\u679c\u8fd9\u90e8\u5206\u4ee3\u7801\u662f\u9996\u5c4f\u6e32\u67d3\u6240\u9700\u7684\uff0c\u90a3\u610f\u5473\u7740\u66f4\u5dee\u7684FCP[1]\u6307\u6807\u3002<\/p>\n
\u5982\u679c\u8fd9\u90e8\u5206\u4ee3\u7801\u662f\u540e\u7eed\u4ea4\u4e92\u6240\u9700\u7684\uff0c\u90a3\u610f\u5473\u7740\u66f4\u5dee\u7684TTI[2]\u6307\u6807\u3002<\/p>\n
\u4e3a\u4e86\u51cf\u5c11\u524d\u7aefJS\u200b\u8d44\u6e90\u5bf9\u6027\u80fd\u7684\u5f71\u54cd\uff0c\u524d\u7aef\u6846\u67b6\u90fd\u5728\u9010\u6b65\u5411\u540e\u8fed\u4ee3\uff0c\u6bd4\u5982Next.js\u200b\u4e4b\u4e8eReact\u200b\uff0cNuxt.js\u200b\u4e4b\u4e8eVue\u3002<\/p>\n
\u65b0\u5174\u6846\u67b6\u4e2d\u7684Astro\u200b\u3001Qwik\u7b49\u4e5f\u662f\u7c7b\u4f3c\u601d\u8def\u3002<\/p>\n
\u800c\u672c\u6587\u804a\u7684htmx\u200b\u4f5c\u4e3a\u540e\u7aef\u4e3b\u5bfc\u7684\u524d\u7aef\u6846\u67b6\uff0c\u672c\u8eab\u7684\u7acb\u8db3\u70b9\u5c31\u662f\u540e\u7aef\u7684view\u5c42\uff0c\u6240\u4ee5\u5929\u751f\u5c31\u662f\u9875\u9762\u6027\u80fd\u53cb\u597d\u7684\u3002<\/p>\n
<\/span><\/a>\u603b\u7ed3<\/h2>\n\u6839\u636e\u300c\u4ea4\u4e92\u903b\u8f91\u5b88\u6052\u300d\uff0c\u4ea4\u4e92\u903b\u8f91\u4e00\u5b9a\u9700\u8981\u5b9e\u73b0\uff0c\u4e0d\u662f\u5728\u524d\u7aef\u5c31\u662f\u5728\u540e\u7aef\u3002<\/p>\n
\u4f20\u7edf\u6765\u8bf4\uff0c\u524d\u7aef\u6846\u67b6\u5c06\u4ea4\u4e92\u653e\u5728\u524d\u7aef\uff0c\u8fd9\u4f1a\u9020\u6210JS\u8d44\u6e90\u53d8\u5927\uff0c\u5f71\u54cd\u6027\u80fd\u3002<\/p>\n
\u5355\u7eaf\u4ece\u529f\u80fd\u6765\u8bb2\uff0chtmx\u4ec5\u4ec5\u662f\u4e2a\u300cHTML\u81ea\u5b9a\u4e49\u5c5e\u6027\u5de5\u5177\u5e93\u300d\uff0c\u4ed6\u5c06\u4e00\u90e8\u5206\u4ea4\u4e92\u6536\u655b\u5230\u81ea\u5b9a\u4e49\u5c5e\u6027\u4e2d\uff0c\u51cf\u5c11\u524d\u7aef\u4ea4\u4e92\u903b\u8f91\u3002<\/p>\n
\u5269\u4e0b\u7684\u4ea4\u4e92\u903b\u8f91\u653e\u5728\u540e\u7aef\u7684view\u200b\uff08\u4f5c\u4e3a\u9875\u9762\u6a21\u7248\uff09\uff0c\u6216controller\u200b\uff08\u5c06HTML\u200b\u4f5c\u4e3a\u63a5\u53e3\u8fd4\u56de\u503c\uff09\uff0c\u4ee5\u6b64\u51cf\u5c11\u524d\u7aefJS\u8d44\u6e90\u7684\u4f53\u79ef\u3002<\/p>\n
\u5bf9\u4e8e\u9875\u9762\u4ea4\u4e92\u590d\u6742\u5ea6\u4e0d\u9ad8\uff0c\u4e14\u662f\u540e\u7aef\u4e3b\u5bfc\u7684\u9879\u76ee\uff08\u4e0d\u60f3\u5199JS\u200b\u903b\u8f91\uff09\uff0c\u76f8\u4fe1htmx\u4f1a\u662f\u4e0d\u9519\u7684\u9009\u62e9\u3002<\/p>\n
<\/span><\/a>\u53c2\u8003\u8d44\u6599<\/h3>\n
<button \n hx-post="\/data"\n hx-trigger="click"\n>\n \u70b9\u6211\u8bf7\u6c42data\n<\/button>\n<\/code><\/pre>\n\u70b9\u51fb\u6309\u94ae\uff08hx-trigger\u6307\u5b9a\u7684click\u4e8b\u4ef6\uff09\u540e\uff0c\u4f1a\u5411data\u63a5\u53e3\uff08hx-post\u6307\u5b9a\uff09\u53d1\u8d77post\u8bf7\u6c42\u3002<\/p>\n
\u90a3\u8bf7\u6c42\u8fd4\u56de\u7684\u6570\u636e\u5982\u4f55\u663e\u793a\u5462\uff1f\u6211\u4eec\u518d\u589e\u52a02\u4e2a\u81ea\u5b9a\u4e49\u5c5e\u6027\uff1a<\/p>\n
\u590d\u5236<\/p>\n
<button \n hx-post="\/data"\n hx-trigger="click"\n hx-target="#parent-div"\n hx-swap="outerHTML"\n>\n \u70b9\u6211\u8bf7\u6c42data\n<\/button>\n<\/code><\/pre>\nhx-target\u6307\u4ee3\u300c\u8fd4\u56de\u7684HTML\u7ed3\u6784\u300d\u4f1a\u88ab\u6ce8\u5165\u5230\u54ea\u91cc\u3002\u8fd9\u91cc\u4f1a\u88ab\u6ce8\u5165\u5230\u300cid\u4e3aparent-div\u7684DOM\u300d\u4e2d\u3002<\/p>\n
hx-swap\u6307\u4ee3\u300c\u8fd4\u56de\u7684HTML\u7ed3\u6784\u4f1a\u4ee5\u4ec0\u4e48\u5f62\u5f0f\u6ce8\u5165\u300d\u3002\u8fd9\u91cc\u4f1a\u76f4\u63a5\u66ff\u6362\u300cid\u4e3aparent-div\u7684DOM\u300d\u3002<\/p>\n
\u5982\u679chx-swap="innerHTML"\u200b\uff0c\u5219\u4ee3\u8868\u4f1a\u4ee5\u300cid\u4e3aparent-div\u7684DOM\u300d\u7684innerHTML\u5f62\u5f0f\u6ce8\u5165\u3002<\/p>\n
\u5982\u679c\u8981\u8868\u8fbe\u590d\u6742\u7684\u903b\u8f91\uff0c\u9700\u8981\u7ed3\u5408\u5f88\u591a\u81ea\u5b9a\u4e49\u5c5e\u6027\u4e0e\u5c5e\u6027\u503c\uff0c\u6bd4\u5982\u4e0b\u9762\u7684\u4ee3\u7801\uff1a<\/p>\n
\u590d\u5236<\/p>\n
<input \n type="text"\n hx-get="\/trigger_delay"\n hx-trigger="keyup changed delay:500ms"\n hx-target="#search-results"\n placeholder="Search..."\n>\n<\/code><\/pre>\n\u5f53input\u200b\u89e6\u53d1keyup\u200b\u4e8b\u4ef6\u4e14\u503c\u6539\u53d8\u540e\uff0c\u5ef6\u8fdf500ms\uff0c\u5411trigger_delay\u200b\u63a5\u53e3\u53d1\u8d77\u8bf7\u6c42\uff0c\u8fd4\u56de\u7684HTML\u7ed3\u6784\u88ab\u6ce8\u5165\u5230\u300cid\u4e3asearch-results\u7684DOM\u300d\u4e2d\u3002<\/p>\n
\u4e0e\u5176\u8bf4htmx\u662f\u4e00\u6b3e\u524d\u7aef\u6846\u67b6\uff0c\u66f4\u8d34\u5207\u7684\u8bf4\uff0c\u4ed6\u5e94\u8be5\u662f\u4e00\u6b3e\u300cHTML\u81ea\u5b9a\u4e49\u5c5e\u6027\u5de5\u5177\u5e93\u300d\u3002<\/p>\n
\u4ed6\u5c06\u5f88\u591a\u5e38\u89c1JS\u200b\u4ea4\u4e92\u903b\u8f91\u6536\u655b\u5230\u81ea\u5b9a\u4e49HTML\u200b\u5c5e\u6027\u4e2d\uff0c\u501f\u6b64\u51cf\u5c11JS\u4ee3\u7801\u91cf\u3002<\/p>\n
\u73b0\u4ee3\u524d\u7aef\u6846\u67b6\u901a\u5e38\u662f\u300c\u72b6\u6001\u9a71\u52a8UI\u300d\uff0c\u800chtmx\u200b\u7684\u7406\u5ff5\u662f\u300c\u8fc7\u7a0b\u9a71\u52a8UI\u300d\uff08\u7c7b\u4f3cjQuery\u65f6\u4ee3\u7f16\u5199\u9875\u9762\u7684\u65b9\u5f0f\uff09\u3002<\/p>\n
\u5982\u679c\u5e0c\u671b\u5f15\u5165\u72b6\u6001\uff0c\u9700\u8981\u4ee5\u63d2\u4ef6\u7684\u5f62\u5f0f\u5f15\u5165alpine-morph\u3002<\/p>\n
\u76f8\u6bd4\u4e8e\uff1a<\/p>\n
\n- React\uff1a\u57fa\u4e8eJSX\u3002<\/li>\n
- Vue\uff1a\u57fa\u4e8e\u6a21\u7248\u8bed\u6cd5\u3002<\/li>\n<\/ul>\n
alpine\u200b\u662f\u4e00\u6b3e\u57fa\u4e8eHTML\u7684\u524d\u7aef\u6846\u67b6\u3002<\/p>\n
\u8fd9\u610f\u5473\u7740\u4f7f\u7528alpine\u200b\u9700\u8981\u76f4\u63a5\u5728HTML\u200b\u4e2d\u4ee5\u81ea\u5b9a\u4e49\u5c5e\u6027\u7684\u5f62\u5f0f\u4e66\u5199\u72b6\u6001\uff08\u4e0eVue v1\u200b\u7c7b\u4f3c\uff09\u3002\u6240\u4ee5\uff0c\u4ed6\u80fd\u5f88\u597d\u7684\u878d\u5165htmx\u7684\u4f53\u7cfb\u4e2d\u3002<\/p>\n
\u6bd4\u5982\u4e0b\u9762\u8fd9\u6bb5\u4ee3\u7801\u662f\u6bb5\u7ed3\u5408htmx\u4e0ealpine\u7684HTML\u200b\uff0c\u5176\u4e2d\u4ee5hx-\u200b\u5f00\u5934\u7684\u662fhtmx\u200b\u5c5e\u6027\uff0c\u4ee5x-\u200b\u5f00\u5934\u7684\u662falphine\u5c5e\u6027\uff1a<\/p>\n
\u590d\u5236<\/p>\n
<div hx-target="this" hx-ext="alpine-morph" hx-swap="morph">\n <div x-data="{ count: 0, replaced: false, \n message: 'Change me, then press the button!' }">\n <input type="text" x-model="message">\n <div x-text="count"><\/div>\n <button x-bind:style="replaced && {'backgroundColor': '#fecaca'}" \n x-on:click="replaced = true; count++" \n hx-get="\/swap">\n Morph\n <\/button>\n <\/div>\n<\/div>\n<\/code><\/pre>\n\u8fd9\u6bb5\u4ee3\u7801\u5305\u542b\u4e86\u4ea4\u4e92\u903b\u8f91\u4e0e\u524d\u7aef\u72b6\u6001\uff0c\u6700\u91cd\u8981\u7684\u662f\uff1a\u4ed6\u662f\u5408\u6cd5\u7684HTML\uff08\u800c\u4e0d\u662fJSX\u6216\u6a21\u7248\u8bed\u6cd5\u8fd9\u6837\u7684DSL\uff09\uff0c\u8fd9\u610f\u5473\u7740\u4ed6\u80fd\u8f7b\u677e\u7684\u5728\u524d\u540e\u7aef\u4e4b\u95f4\u4f20\u9012\uff0c\u5e76\u5728\u524d\u7aef\u5c55\u793a\u3002<\/p>\n
<\/span><\/a>\u4ea4\u4e92\u903b\u8f91\u5b88\u6052<\/h2>\n\u672c\u8d28\u6765\u8bf4\uff0c\u7f51\u9875\u7684\u6700\u7ec8\u6d88\u8d39\u54c1\u662fHTML\u4e0eCSS\u200b\u3002\u5f00\u53d1\u8005\u7f16\u5199\u4ea4\u4e92\u903b\u8f91\u6539\u53d8HTML\u4e0eCSS\u3002<\/p>\n
\u524d\u7aef\u5de5\u7a0b\u5e08\u4e60\u60ef\u5728\u7f51\u9875\u4e2d\u901a\u8fc7JS\u7f16\u5199\u4ea4\u4e92\u903b\u8f91\u3002<\/p>\n
\u540e\u7aef\u5de5\u7a0b\u5e08\u4e60\u60ef\u5728\u540e\u7aef\u7f16\u5199\u4ea4\u4e92\u903b\u8f91\u3002\u6bd4\u5982\u5728htmx\u200b\u4e2d\uff0c\u8bf7\u6c42\u8fd4\u56de\u7684\u662fHTML\u200b\u7ed3\u6784\uff0c\u8fd9\u90e8\u5206\u300c\u751f\u6210HTML\u7684\u903b\u8f91\u300d\u662f\u5728\u540e\u7aefcontroller\u200b\u4e2d\u5b9e\u73b0\u7684\uff08\u800c\u4e0d\u662f\u5728\u524d\u7aef\u901a\u8fc7JS\u751f\u6210\uff09\u3002<\/p>\n
\u9664\u6b64\u4e4b\u5916\uff0c\u8fd8\u6709\u4e00\u90e8\u5206\u4ea4\u4e92\u903b\u8f91\u662f\u5728\u540e\u7aef\u300cHTML\u6a21\u7248\u300d\u4e2d\u4ea7\u751f\u7684\u3002\u4e0b\u56fe\u662fDjango\u200b\u4e2d\u7ed3\u5408htmx\u7684\u540e\u7aef\u6a21\u7248\u4ee3\u7801\u793a\u4f8b\uff1a<\/p>\n
<\/div><\/p>\n\u4e0d\u7ba1\u4ea4\u4e92\u903b\u8f91\u5728\u524d\u7aef\u8fd8\u662f\u540e\u7aef\u5b9e\u73b0\uff0c\u4e5f\u4e0d\u7ba1\u7528\u54ea\u79cd\u8bed\u8a00\u5b9e\u73b0\uff0c\u4ed6\u662f\u4e00\u5b9a\u9700\u8981\u5b9e\u73b0\u7684\uff0c\u4e5f\u5c31\u662f\u8bf4\u300c\u4ea4\u4e92\u903b\u8f91\u5b88\u6052\u300d\u3002<\/p>\n
\u4f46\u662f\uff0c\u4ea4\u4e92\u903b\u8f91\u5728\u524d\u7aef\u8fd8\u662f\u540e\u7aef\u5b9e\u73b0\uff0c\u5bf9\u9875\u9762\u5e26\u6765\u7684\u5f71\u54cd\u662f\u4e0d\u540c\u7684\u3002<\/p>\n
<\/span><\/a>\u5bf9\u9875\u9762\u6027\u80fd\u7684\u5f71\u54cd<\/h2>\n\u4ea4\u4e92\u903b\u8f91\u5728\u524d\u7aef\u5b9e\u73b0\u7684\u8d8a\u591a\uff0c\u610f\u5473\u7740\u300c\u8d8a\u591a\u7684JS\u4ee3\u7801\u300d\uff0c\u5982\u679c\u8fd9\u90e8\u5206\u4ee3\u7801\u662f\u9996\u5c4f\u6e32\u67d3\u6240\u9700\u7684\uff0c\u90a3\u610f\u5473\u7740\u66f4\u5dee\u7684FCP[1]\u6307\u6807\u3002<\/p>\n
\u5982\u679c\u8fd9\u90e8\u5206\u4ee3\u7801\u662f\u540e\u7eed\u4ea4\u4e92\u6240\u9700\u7684\uff0c\u90a3\u610f\u5473\u7740\u66f4\u5dee\u7684TTI[2]\u6307\u6807\u3002<\/p>\n
\u4e3a\u4e86\u51cf\u5c11\u524d\u7aefJS\u200b\u8d44\u6e90\u5bf9\u6027\u80fd\u7684\u5f71\u54cd\uff0c\u524d\u7aef\u6846\u67b6\u90fd\u5728\u9010\u6b65\u5411\u540e\u8fed\u4ee3\uff0c\u6bd4\u5982Next.js\u200b\u4e4b\u4e8eReact\u200b\uff0cNuxt.js\u200b\u4e4b\u4e8eVue\u3002<\/p>\n
\u65b0\u5174\u6846\u67b6\u4e2d\u7684Astro\u200b\u3001Qwik\u7b49\u4e5f\u662f\u7c7b\u4f3c\u601d\u8def\u3002<\/p>\n
\u800c\u672c\u6587\u804a\u7684htmx\u200b\u4f5c\u4e3a\u540e\u7aef\u4e3b\u5bfc\u7684\u524d\u7aef\u6846\u67b6\uff0c\u672c\u8eab\u7684\u7acb\u8db3\u70b9\u5c31\u662f\u540e\u7aef\u7684view\u5c42\uff0c\u6240\u4ee5\u5929\u751f\u5c31\u662f\u9875\u9762\u6027\u80fd\u53cb\u597d\u7684\u3002<\/p>\n
<\/span><\/a>\u603b\u7ed3<\/h2>\n\u6839\u636e\u300c\u4ea4\u4e92\u903b\u8f91\u5b88\u6052\u300d\uff0c\u4ea4\u4e92\u903b\u8f91\u4e00\u5b9a\u9700\u8981\u5b9e\u73b0\uff0c\u4e0d\u662f\u5728\u524d\u7aef\u5c31\u662f\u5728\u540e\u7aef\u3002<\/p>\n
\u4f20\u7edf\u6765\u8bf4\uff0c\u524d\u7aef\u6846\u67b6\u5c06\u4ea4\u4e92\u653e\u5728\u524d\u7aef\uff0c\u8fd9\u4f1a\u9020\u6210JS\u8d44\u6e90\u53d8\u5927\uff0c\u5f71\u54cd\u6027\u80fd\u3002<\/p>\n
\u5355\u7eaf\u4ece\u529f\u80fd\u6765\u8bb2\uff0chtmx\u4ec5\u4ec5\u662f\u4e2a\u300cHTML\u81ea\u5b9a\u4e49\u5c5e\u6027\u5de5\u5177\u5e93\u300d\uff0c\u4ed6\u5c06\u4e00\u90e8\u5206\u4ea4\u4e92\u6536\u655b\u5230\u81ea\u5b9a\u4e49\u5c5e\u6027\u4e2d\uff0c\u51cf\u5c11\u524d\u7aef\u4ea4\u4e92\u903b\u8f91\u3002<\/p>\n
\u5269\u4e0b\u7684\u4ea4\u4e92\u903b\u8f91\u653e\u5728\u540e\u7aef\u7684view\u200b\uff08\u4f5c\u4e3a\u9875\u9762\u6a21\u7248\uff09\uff0c\u6216controller\u200b\uff08\u5c06HTML\u200b\u4f5c\u4e3a\u63a5\u53e3\u8fd4\u56de\u503c\uff09\uff0c\u4ee5\u6b64\u51cf\u5c11\u524d\u7aefJS\u8d44\u6e90\u7684\u4f53\u79ef\u3002<\/p>\n
\u5bf9\u4e8e\u9875\u9762\u4ea4\u4e92\u590d\u6742\u5ea6\u4e0d\u9ad8\uff0c\u4e14\u662f\u540e\u7aef\u4e3b\u5bfc\u7684\u9879\u76ee\uff08\u4e0d\u60f3\u5199JS\u200b\u903b\u8f91\uff09\uff0c\u76f8\u4fe1htmx\u4f1a\u662f\u4e0d\u9519\u7684\u9009\u62e9\u3002<\/p>\n
<\/span><\/a>\u53c2\u8003\u8d44\u6599<\/h3>\n
![\"\u56fe\u7247\"](\"https:\/\/s3.51cto.com\/oss\/202210\/20\/8170676932cf0e42c7b08293b1d3da75333f00.png\" "\\"\u56fe\u7247\\"")
<\/div><\/p>\n