アルパイン.js

JQueryは静的なHTMLへの何らかのやり取りを非常に簡単に追加するための素晴らしい方法でしたが、ページの複数の部分を調整しようとすると、ちょっと重い手前に感じ始めるかもしれません.
この対話性をもう少し宣言的に設定する方法があればいいのではないでしょうか?

入力Alpine.js
このようにあなたのページにアルパインを加えてください

<script src="<https://cdn.jsdelivr.net/gh/alpinejs/[email protected]/dist/alpine.min.js>" defer></script>

次に、単純なコンポーネントを宣言することができます.

<div x-data="{ open: false }"> <button @click="open = true">Open Dropdown</button> <ul x-show="open" @click.away="open = false" > Dropdown Body </ul> </div>

x-dataは、ルート要素と、コンポーネントの初期状態を示します.その要素の子供たちは、現在@<event name>構文でイベントを聞くことができます.アルパインにはいくつかのショートカットがあります.
スタイルのアルペンの選択はVueからまっすぐに持ち上げられます、それで、あなたがVueにいくぶん慣れているならば、あなたはアルプスの語彙で家で正しく感じなければなりません.
Vueと言えば、再利用可能なコンポーネントを作成することも可能です.

<div x-data="dropdown()"> <button x-on:click="open">Open</button> <div x-show="isOpen()" x-on:click.away="close"> // Dropdown </div> </div> <script> function dropdown() { return { show: false, open() { this.show = true }, close() { this.show = false }, isOpen() { return this.show === true }, } } </script>

x-showはすべてのコンポーネントコードを含んでいるオブジェクトを返します:州はフィールドを使用して定義されます、そして、機能は標準的な方法で宣言されます.dropdownの結果にx-dataを設定すると、フィールドと関数はすべての子要素に利用できます.簡単にいくつかのロジックを再利用するために使用します.

刺激
同じことをたくさんしようとする別のフレームワークは次のとおりです.既存のHTMLを使用してJavaScriptの中に振りかける.
私は、刺激に関して完全に売られません.それは正しい考えだと思いますが、エレガントに実行されません.アルペンはあなたの方法で少し少なく感じます、しかし、それはちょうど個人的な好みです.

閉鎖思考
あなたがこれまでの静的なページの若干の双方向性を必要としているならば、本当にAlpine Aを見てください.私が必要とするすべては、私の静的なHTMLで少しずつ起きているとき、私はそれでこれまで成功しました.
ハッピーコーディング!