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

如果还是比较习惯 Vue.js 的方式，像是 @click、v-model、v-if 之类的，换到 Livewire 後非常不习惯的话。那可以试试看 AlpineJS ，在各个方面都可以把 Livewire 弄得像在写 Vue 一样！！

安装

非常简单，跟引入一般的 JS 一样。可以直接引入 CDN 上的，也可以下载引入自己本机上的。

<head>
    ...
    <script src="https://cdn.jsdelivr.net/gh/alpinejs/[email protected]/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 可以详阅文件

<<: 【day14】 Fab X 跳页Animation

>>: [D14] 卷积 Convolution