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

標籤: Alpine.js javascript

Alpine.js 總共有 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 中完全移除元素。必須在 <template> 標籤上使用。
x-for 為陣列中的每個項目建立新 DOM 節點。必須在 <template> 標籤上使用。
x-transition 用於在轉場的各個階段為元素設定 Class 的指示詞。
x-spread 為了更佳的可複用性,可將包含 Alpine 指示詞的物件繫結至元素上。
x-cloak 該屬性會在 Alpine 初始化後移除。適合用來隱藏還未初始化的 DOM。

 

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 會依據運算式為 truefalse 來在元素上會新增或移除 display: none; 樣式。

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

<div x-show.transition="open">
    這裡的內容會轉換入、轉換出。
</div>
指示詞 說明
x-show.transition 同時淡入淡出並縮放。 (opacity, scale: 0.95, timing-function: cubic-bezier(0.4, 0.0, 0.2, 1), duration-in: 150ms, duration-out: 75ms)
x-show.transition.in 僅轉換入。
x-show.transition.out 僅轉換出。
x-show.transition.opacity 僅使用淡入淡出。
x-show.transition.scale 僅使用縮放。
x-show.transition.scale.75 自定 CSS 縮放變換 transform: scale(.75).
x-show.transition.duration.200ms 設定「轉換入」的變換為 200ms。轉換出將設定為該值的一半 (100ms).
x-show.transition.origin.top.right 自定 CSS 變換的起始 transform-origin: top right.
x-show.transition.in.duration.200ms.out.duration.50ms 為「轉換入」與「轉換出」設定不同的持續時間。

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

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 支援以與數值屬性相同的方式來繫結布林屬性,只需使用作為判斷條件的變數或是任意可以解為 truefalse 的 JavaScript 運算式即可。

 

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

 

.camel 修飾詞

範例:

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

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