[Alpine.js] 極輕量的 javascript 框架，初始化教學

這幾年三大框架(React, Vue.js, Angular.js) 席捲前端界，不過如果為了寫一些小功能就要去使用這些框架的話總是有點大材小用，於是像 Alpine.js 這種打著極簡 js 風格的框架就這樣誕生了。

alpine.js 官方網站(Github)

要使用的話只要用 cdn 就可以了。

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

或是透過 npm:

npm i alpinejs

然後再 import

import 'alpinejs'

如果要支援 IE11 的話要讀入這兩隻 js：

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

初始範例：

alpine.js 有說他有參考 Vue.js，所以上面的 x-data 就類似於 Vue.js 的 data 物件，只是我們可以直接寫在 dom 裡，利用 x-show 來判斷是否要顯示，利用 @click 來切換 open 的值，比較不一樣的是在展開的地方設定 @click.away，就可以在 open 是 true 的時候點擊並把 open 改成 false 了。

另外再看一個 tab 的切換效果。

跟 Vue.js 一樣，利用切換 tab 的值再透過 x-show 去指定要顯示哪個即可。

這是官方簡單的應用說明，接下來再用幾篇來說明一下其他用法。