Alpine.js

Alpine.jsはHTMLの属性にディレクティブを指定してリアクティブな動作を実装できるJavaScriptフレームワークです

vue.jsやreact.jsといったフレームワークのリアクティブ且つ宣言的な性質を低コストで提供してくれる、というもの

開発者はTailwind.cssのJS版のようなもの、と説明しています

Alpine.jsでは13のディレクティブと、5のマジックプロパティと呼ばれるものを使う事が出来ます。Vue.jsとほぼ同じ機能を使える、という認識で良いと思います

<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v1.10.1/dist/alpine.js" defer></script>

↑ まずはスクリプトを読みこみます

試しに何か作ってみましょう

 <div x-data="{selected:null}">
<h4 @click="selected !== 0 ? selected = 0 : selected = null">piyopiyo</h4>
         <p x-show="selected == 0">hogehoge</p>
 </div>

vueのディレクティブと同様、Alpine.jsではx-**という形式になっています ↓

<div x-data="{selected:null}">...</div>

マジックプロパティは$el、$refs、$eventなどなど5つのプロパティが用意されています

 <h4 @click="selected !== 0 ? selected = 0 : selected = null">piyopiyo</h4>
         <p x-show="selected == 0">hogehoge</p>

HTMLを拡張する事で簡単に開閉式のアコーディオンを作る事が出来ました ↓

Tailwind.cssとも相性が良いのでvue.jsを使い慣れてTailwind.cssも使っている方は特に飲み込みやすいなんじゃないでしょうか

Alpine.js