Alpine.jsのクリックイベントの例

まず、Alpine.jsをHTMLに読み込みます。以下のようなCDNリンクを使用することができます。

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

次に、Alpine.jsを使用してクリックイベントを処理する例を示します。

<div x-data="{ count: 0 }">
  <button @click="count++">クリック</button>
  <p>クリックされた回数: <span x-text="count"></span></p>
</div>

上記のコードでは、x-dataディレクティブを使用して、countという名前のデータプロパティを定義しています。@clickディレクティブを使用して、ボタンがクリックされたときにcountをインクリメントする命令を指定しています。そして、x-textディレクティブを使用して、countの値を表示しています。

この例では、ボタンがクリックされるたびにcountの値がインクリメントされ、画面上に表示されます。

Alpine.jsでは、他のイベントも同様に処理することができます。たとえば、@mouseoverディレクティブを使用してマウスオーバーイベントを処理することもできます。

以上がAlpine.jsを使用してクリックイベントを処理する方法の基本的な例です。より詳細な情報や応用例については、公式のAlpine.jsドキュメントを参照してください。