iT邦幫忙

2021 iThome 鐵人賽

DAY 27
0
Modern Web

Laravel Livewire:不用 Vue 跟 jQuery 居然也能讓 Laravel 的畫面動起來 ?!系列 第 27

Day26 | 很像 Vue 的 AlpineJS(一): x-data

如果還是比較習慣 Vue.js 的方式,像是 @clickv-modelv-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.datax-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 可以詳閱文件


上一篇
Day 25 | Livewire 實作 購物網站(四): 結帳頁面
下一篇
Day27 - 很像 Vue 的 AlpineJS(二): 常用屬性
系列文
Laravel Livewire:不用 Vue 跟 jQuery 居然也能讓 Laravel 的畫面動起來 ?!34

尚未有邦友留言

立即登入留言