透过 x-data 宣告一个 Alpine 元件後就可以来操作里面的内容啦！今天会大略介绍一些比较常用的属性，也都跟 Vue 非常相似！

常用属性

x-show

就像 Vue 的 v-show。渲染时都会把元素渲染出来，但预设为 hidden。

<div x-show="open">
    Dropdown Contents...
</div>

x-if

与 x-show 不同的地方就是他是透过增减 DOM 的方式在操控显示的画面，因此只建议用在 <template> 标签上。

<template x-if="open">
    <div>Contents...</div>
</template>

x-for

就跟 Vue 及 Laravel @foreach 的使用方式差不多。

<ul x-data="{ colors: ['Red', 'Orange', 'Yellow'] }">
    <template x-for="color in colors">
        <li x-text="color"></li>
    </template>
</ul>

有两点需要注意：

1. x-for 只能宣告在 <template> 中。
2. <template> 里面只能有一个子元素。

别忘了加上 Key

在 Livewire 的子元件单元中也有提过，没有 key 的话程序会没办法追踪该 DOM，容易导致资料变动时页面发生无法预期的错误。

注意：与 Vue 及 Livewire 不同的地方是 key 是写在 <template> 上！

<ul x-data="{ colors: [
    { id: 1, label: 'Red' },
    { id: 2, label: 'Orange' },
    { id: 3, label: 'Yellow' },
]}">
    <template x-for="color in colors" :key="color.id">
        <li x-text="color.label"></li>
    </template>
</ul>

如果需要 Index

就是 JS 的用法，虽然会跟原本 PHP 的 foreach...as 有些相反

<template x-for="(color, index) in colors">
    <li>
        <span x-text="index + ': '"></span>
        <span x-text="color"></span>
    </li>
</template>

单纯的迭代

如果只是需要单纯重复 n 次，Alpine 也有提供这种功能：

<ul>
    <template x-for="i in 10">
        <li x-text="i"></li>
    </template>
</ul>

x-bind

可以绑定各种 HTML 的属性，比较常用会用於绑定 class、style 等等，或像是这样：

<div x-data="{ placeholder: 'Type here...' }">
  <input type="text" x-bind:placeholder="placeholder">
</div>

当然在 Vue 中我们知道 v-bind:class 其实可以缩写成 :class，这在 Alpine 中也是一样的：

<div :class="{ 'hidden': ! show }">

<div :style="{ color: 'red', display: 'flex' }">

x-text

非常单纯，就是把值塞入该 HTML 元素中的 text。

<div x-data="{ username: 'calebporzio' }">
    Username: <strong x-text="username"></strong>
</div>

x-html

与上面的不同是在於，x-html 是透过 innerHTML 来产出资料。因此可以呈现出带有 HTML标签的字串。

‼️严重注意‼️：动态渲染出来的 HTML 很容易造成 XSS 漏洞。此功能应仅慎使用，像是只让网站管理员填入的资料才能够过 x-html 印出等等。

<div x-data="{ username: '<strong>calebporzio</strong>' }">
    Username: <span x-html="username"></span>
</div>

x-transition

简单易用的过场动画，若要搭配 CSS 可以详见文件。

注： 如果没效果请更新 AlpineJS 的版本

<div x-data="{ open: false }">
    <button @click="open = ! open">Toggle</button>
 
    <span x-show="open" x-transition>
        Hello ?
    </span>
</div>

x-effect

在每次被渲染时都会自动触发，很方便来对元件的内容进行除错！

<div x-data="{ label: 'Hello' }" x-effect="console.log(label)">
    <button @click="label += ' World!'">Change Message</button>
</div>

这边点击两次按钮，会让 console 会印出

Hello
Hello World!
Hello World! World!

x-ignore

如果某个区块不想要被 AlpineJS 所影响，但又包在 x-data 中。就可以加上 x-igonre 这样渲染後该区块就会无视掉 x-data ，当然底下所以的 AlpineJS 的操作都无法使用了。

<div x-data="{ label: 'From Alpine' }">
    <div x-ignore>
        <span x-text="label"></span>
    </div>
</div>

此范例将不会印出任何东西，因为 x-data 无效後底下的 x-text 自然就无效了。

x-ref

看起跟 Vue 有些为不一样，但功能是一样的。做到目前为止，无论是 Livewire 还是 AlpineJS 都没有直接对 DOM 去做操作，但偶尔极少情况下还是要手动去更动 DOM 的话就可以用这个功能啦！

原本 Vue 是直接在目标元素上加上 ref="someElement" 这边就要变成 x-ref="someElement"。之後透过 $refs.someElement 就可以直接对该元素做想做的事罗！

<button @click="$refs.text.remove()">Remove Text</button>
 
<span x-ref="text">Hello ?</span>

更多内容可以翻阅 AlpineJS文件

不过还有一个 x-model 还没讲，因为内容较多就留到明天吧 XD