Day26 | 很像 Vue 的 AlpineJS（一）： x-data

13th鐵人賽 livewire laravel php

RenZhou

2021-09-29 18:33:36

1908 瀏覽

分享至

如果還是比較習慣 Vue.js 的方式，像是 @click、v-model、v-if 之類的，換到 Livewire 後非常不習慣的話。那可以試試看 AlpineJS ，在各個方面都可以把 Livewire 弄得像在寫 Vue 一樣！！

安裝

非常簡單，跟引入一般的 JS 一樣。可以直接引入 CDN 上的，也可以下載引入自己本機上的。

<head>
    ...
    <script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.8.2/dist/alpine.min.js" defer></script>
    <!-- The "defer" attribute is important to make sure Alpine waits for Livewire to load first. -->
</head>

注意：後面的 defer 是要確保 Alpine 會先等 Livewire 讀取完才會載入

Alpine 的一切都始於 x-data

官方文件

基本用法

x-data 用來宣告 Alpine 的元件。所有 Alpine 的操作都必須在帶有 x-data 的元素內，就像是 Vue 最外層都必須是 id="app"。

注意：Alpine 的資料操作皆為前端資料，與 Livewire 帶過來的資料無關。

<div x-data>
	...
</div>

也可以帶物件跟值進去：

<div x-data="{ title: 'Hello' }">
    <p x-text="title" />
</div>

範圍 Scope

x-data 也適用於多層的嵌套元件，並且能向上取得上層元件的 x-data 內容。

<div x-data="{ foo: 'bar' }">
    <span x-text="foo"><!-- Will output: "bar" --></span>
 
    <div x-data="{ bar: 'baz' }">
        <span x-text="foo"><!-- Will output: "bar" --></span>
 
        <div x-data="{ foo: 'bob' }">
            <span x-text="foo"><!-- Will output: "bob" --></span>
        </div>
    </div>
</div>

方法 Methods

因為 x-data 能放入一般的 JavaScript 的 Object 因此像是 methods 或是 getter 原本能放進 Object 的都能放。

<div x-data="{ open: false, toggle() { this.open = ! this.open } }">
    <button @click="toggle()">Toggle Content</button>
 
    <div x-show="open">
        Content...
    </div>
</div>

Getters

JavaScript Objcet 的 Getter 也能用，比較像是 Vue 的計算屬性 Computed：

<div x-data="{
  open: false,
  get isOpen() { return this.open },
  toggle() { this.open = ! this.open },
}">
    <button @click="toggle()">Toggle Content</button>
 
    <div x-show="isOpen">
        Content...
    </div>
</div>

重複使用元件

有時候有很多地方會重複使用到一樣的元件，像是按鈕或是下拉選單。或是說元件內容太冗長，也能透過 Alpine.data 將 x-data 的物件提取出來。

<div x-data="dropdown">
    <button @click="toggle">Toggle Content</button>
 
    <div x-show="open">
        Content...
    </div>
</div>
 
<script>
    document.addEventListener('alpine:init', () => {
        Alpine.data('dropdown', () => ({
            open: false,
 
            toggle() {
                this.open = ! this.open
            },
        }))
    })
</script>

更多關於 Alpine.data 可以詳閱文件