[Alpine.js] 指示詞 (Directive)應用之一

Alpine.js 總共有 14 種可用的指示詞 (Directive)：

x-data

結構：

<div x-data="[JSON 資料物件]">...</div>

x-data 宣告新的元件定義範圍。使用 x-data 會告知 Alpine 以給定的資料物件來初始化新的元件，可以想像成 Vue.js 的 data。

也可以將資料或行為抽出來：

這個範例就是把 dropdown 抽出來，就可以在 js 的 function 裡寫比較複雜的判斷了。

如果內容比較複雜的話，也可以透過物件解構將多個物件混合在一起：

<div x-data="{...dropdown(), ...tabs()}">

x-init

範例：

<div x-data="{ foo: 'bar' }" x-init="foo = 'baz'"></div>

結構：

<div x-data="..." x-init="[運算式]"></div>

x-init 會在元素初始化後執行運算式。

若想在 Alpine 將更新套用至 DOM 之後 才執行程式碼的話 (類似 VueJS 中的 mounted() Hook)，可以從 x-init 中回傳一個回呼函式，該函式會在出套用至 DOM 後才執行：

x-init="() => { // 此處可存取 DOM 初始化完畢後的狀態 // }"

x-show

範例：

<div x-show="open"></div>

結構：

<div x-show="[運算式]"></div>

x-show 會依據運算式為 true 或 false 來在元素上會新增或移除 display: none; 樣式。

可以搭配 x-show.transition 與 CSS transition 配合製作轉場效果。

<div x-show.transition="open">
    這裡的內容會轉換入、轉換出。
</div>

所有的轉換修辭都可以組合運用，像這樣：

x-show.transition.in.duration.100ms.origin.top.right.opacity.scale.85.out.duration.200ms.origin.bottom.left.opacity.scale.95

x-show 會等待所有子節點都完成轉換後。若想跳過這個行為，請加上 .immediate 修飾詞：

<div x-show.immediate="open">
    <div x-show.transition="open">
</div>

x-bind

範例：

<input x-bind:type="inputType">

結構：

<input x-bind:[屬性]="[運算式]">

x-bind 將屬性值設為 JavaScript 運算式的結果。運算式中可以存取元件資料物件中的所有索引鍵，且每次資料有更新時都更新。

將 x-bind 用在 Class 屬性

當繫結在 class 屬性時，x-bind 的運作模式會有點不同。

對於 Class，需要傳入一個物件，其中物件的索引鍵為 Class 的名稱，而值則為布林運算式，用來判斷是否要套用該 Class 名稱。

如： 

<div x-bind:class="{ 'hidden': foo }"></div>

在該例中，「hidden」class 只會在 foo 資料屬性的值為 true 時套用。

將 x-bind 用在布林屬性

x-bind 支援以與數值屬性相同的方式來繫結布林屬性，只需使用作為判斷條件的變數或是任意可以解為 true 或 false 的 JavaScript 運算式即可。

布林屬性的支援係依據 HTML 規範，如 disabled, readonly, required, checked, hidden, selected, open …等。

.camel 修飾詞

範例:

<svg x-bind:view-box.camel="viewBox">

使用 camel 修飾詞會繫結到對應駝峰命名法的屬性上。在上述例子中， viewBox 的值會被繫結到 view-box 所對應的 viewBox 屬性上。