...
`
**結構:** `...
`
`x-data` 宣告新的元件定義範圍。使用 x-data 會告知 Alpine 以給定的資料物件來初始化新的元件。
可想像成 Vue 元件中的 `data` 屬性。
**抽出元素邏輯**
可以將資料 (與行為) 抽出成可重複使用的函式：
```html
```
---
### `x-init`
**範例:** `
`
**結構:** `
`
`x-init` 會在元素初始化後執行運算式。
若想在 Alpine 將更新套用至 DOM **之後** 才執行程式碼的話 (類似 VueJS 中的 `mounted()` Hook)，可以從 `x-init` 中回傳一個回呼函式，該函式會在出套用至 DOM 後才執行：
`x-init="() => { // 此處可存取 DOM 初始化完畢後的狀態 // }"`
---
### `x-show`
**範例:** `
`
**結構:** `
`
`x-show` 會依據運算式為 `true` 或 `false` 來在元素上會新增或移除 `display: none;` 樣式。
**x-show.transition**
`x-show.transition` 是一個很方便的 API，可使 `x-show` 更與 CSS Transition 配合地更佳完美。
```html
這裡的內容會轉換入、轉換出。
```
| 指示詞 | 說明 |
| --- | --- |
| `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` | 為「轉換入」與「轉換出」設定不同的持續時間。 |
> 備註：所有的轉換修飾詞都可以互相組合使用。可以這樣用 (雖然很故意XD)： `x-show.transition.in.duration.100ms.origin.top.right.opacity.scale.85.out.duration.200ms.origin.bottom.left.opacity.scale.95`
> 備註：`x-show` 會等待所有子節點都完成轉換後。若想跳過這個行為，請加上 `.immediate` 修飾詞：
```html
```
---
### `x-bind`
> 備註：也可以使用較短的「:」語法： `:type="..."`
**範例:** `
`
**結構:** `
`
`x-bind` 將屬性值設為 JavaScript 運算式的結果。運算式中可以存取元件資料物件中的所有索引鍵，且每次資料有更新時都更新。
> 備註：屬性繫結 **僅會** 在其相依的值更新時才更新。Alpine 框架會觀察資料的更改，並偵測哪個繫結與該資料有關。
**將 `x-bind` 用在 Class 屬性**
當繫結在 `class` 屬性時，`x-bind` 的運作模式會有點不同。
對於 Class，需要傳入一個物件，其中物件的索引鍵為 Class 的名稱，而值則為布林運算式，用來判斷是否要套用該 Class 名稱。
如：
`
`
在該例中，「hidden」class 只會在 `foo` 資料屬性的值為 `true` 時套用。
**將 `x-bind` 用在布林屬性**
`x-bind` 支援以與數值屬性相同的方式來繫結布林屬性，只需使用作為判斷條件的變數或是任意可以解為 `true` 或 `false` 的 JavaScript 運算式即可。
如：
```html
```
該範例中的程式會依據 `myVar` 為 true 或 false 來新增或移除 disabled 屬性。
布林屬性的支援係依據 [HTML 規格 (英文)](https://html.spec.whatwg.org/multipage/indices.html#attributes-3:boolean-attribute)，如 `disabled`, `readonly`, `required`, `checked`, `hidden`, `selected`, `open` …等。
**`.camel` 修飾詞**
**範例:** `
**想在這裡顯示你的 Logo 嗎？ [在 Twitter 上傳送 DM](https://twitter.com/calebporzio)**
## VIP 參與者