極不專業分享。

首先我想試試Alpine.js這小框架，
過去曾使用過vue框架的朋友們應該會覺得比較容易上手，
語法大概87%像，功能也沒vue複雜，
相對的好處就是容量非常的小!
接著我們就來試玩看看吧~

先付上git
https://github.com/alpinejs/alpine
(聰明的朋友們到這可能已經會了)
裡面還有附Alpine.js 繁體中文文件，真的是超級貼心!
https://github.com/alpinejs/alpine/blob/master/README.zh-TW.md
(如果以上都看懂了，你其實可以轉走了~
那跟我一樣幼幼班的朋友可以跟我慢慢往下走喔!)

##安裝
在<header>標籤裡加上 (擇一即可)
1.
使用CDN(把網址貼下來看就可以看到非常複雜的JS)

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

把git裡面的Alpine.js拿出來用，裡面排版比較人性化，
大概2000行有找，但還是太長了我就不附code了

使用NPM

npm i alpinejs

然後在腳本放

import 'alpinejs'

重要語法(重要!)

先了解一下，明天再慢慢來玩看看。

14 種可用的指示詞 (Directive)：

指示詞 說明
x-data
-宣告新元件定義範圍。
x-init
-模組初始化後執行運算式。
x-show
-依據運算式 (true 或 false) 新增或移除元素的 display: none;。
x-bind
-將屬性的值設為 JS 運算式的執行結果。
x-on
-將事件監聽器附加至元素上。當事件發出後執行 JS 運算式。
x-model
-為元素新增「雙向資料繫結」。保持輸入元素與元件資料間的同步。
x-text
-與 x-bind 的運作方式類似，但更新的是元素的 innerText。
x-html
-與 x-bind 的運作方式類似，但更新的是元素的 innerHTML。
x-ref
-從元素中取得原始 DOM 元素的簡便方法。
x-if
-從 DOM 中完全移除元素。必須在 標籤上使用。
x-for
-為陣列中的每個項目建立新 DOM 節點。必須在 標籤上使用。
x-transition
-用於在轉場的各個階段為元素設定 Class 的指示詞
x-spread
-為了更佳的可複用性，可將包含 Alpine 指示詞的物件繫結至元素上
x-cloak
-該屬性會在 Alpine 初始化後移除。適合用來隱藏還未初始化的 DOM。

6 個魔法屬性：

魔法屬性 說明
$el
-截取根元素的 DOM 節點。
$refs
-截取元素中以 x-ref 標記的 DOM 元素。
$event
-在事件監聽器中截取瀏覽器的原生「Event」物件。
$dispatch
-建立 CustomEvent 並在內部以其 .dispatchEvent() 發送該 CustomEvent。
$nextTick
-在 Alpine 處理好 DOM 更新 之後 執行給定的運算式。
$watch
-當正在「監聽 - watch」的屬性發生改動後，觸發給定的回呼函式。