Alpine.js 入门到精通

Alpine.js 是一个轻量级的 JavaScript 框架，它允许你在前端开发中使用类似 Vue.js 或 React 的响应式和声明式编程风格，但它的体积更小，性能更高，且不需要构建步骤。Alpine.js 的设计目标是让你能够在现有的 HTML 结构中快速添加交互功能，而无需复杂的配置或大量的 JavaScript 代码。

Alpine.js 的特点

轻量级：Alpine.js 的体积非常小，压缩后只有几 KB，适合在不需要复杂前端框架的项目中使用。
响应式：Alpine.js 提供了类似 Vue.js 的响应式数据绑定功能，可以轻松地实现数据的动态更新。
声明式：通过简单的 HTML 属性，你可以声明性地定义组件的行为和状态。
无需构建工具：Alpine.js 可以直接在浏览器中使用，无需 Webpack、Vite 等构建工具。
易于集成：可以轻松地与现有的项目集成，适合在服务器端渲染（SSR）的项目中使用。

官网
https://alpinejs.dev/
中文文档
https://www.alpinejs.cn/
Awesome
https://github.com/alpine-collective/awesome

快速上手

直接引入

<script src="https://cdn.jsdelivr.net/npm/alpinejs/dist/cdn.min.js"></script>

HelloWord

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Alpine.js 测试</title>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn.min.js" defer></script>
</head>
<body>
    <div x-data="{ message: 'Hello, Alpine.js!' }">
        <span x-text="message"></span>
    </div>
</body>
</html>

15个核心属性，

15 个 Attributes 核心属性

介绍 Alpine.js 的 15 个核心属性，并通过简单的示例展示它们的用法。

1. `x-data`

x-data 用于定义组件的数据模型，相当于声明一个作用域。

<div x-data="{ count: 0 }">
    <button @click="count++">增加</button>
    <p>当前计数：<span x-text="count"></span></p>
</div>

功能：x-data 定义了一个局部的 JavaScript 对象（例如 { count: 0 }），可以绑定到 HTML 元素上并在子元素中访问。

2. `x-init`

x-init 用于组件初始化时执行特定的 JavaScript 逻辑。

<div x-data="{ message: '' }" x-init="message = '组件已初始化'">
    <p x-text="message"></p>
</div>

功能：x-init 在组件加载时执行逻辑，比如初始化数据或触发某些行为。

3. `x-show`

x-show 用于控制元素的显示和隐藏（通过 display: none 实现）。

<div x-data="{ isVisible: true }">
    <button @click="isVisible = !isVisible">切换显示</button>
    <p x-show="isVisible">我可以显示或隐藏</p>
</div>

功能：根据布尔值动态显示或隐藏元素。

4. `x-bind`

x-bind 用于动态绑定属性，等价于 Vue.js 的 :attribute。

<div x-data="{ url: 'https://example.com' }">
    <a :href="url" x-bind:title="'访问 ' + url">访问链接</a>
</div>

功能：x-bind 将数据绑定到 HTML 属性，如 title、href 等。

5. `x-on`

x-on 用于监听事件，等价于 Vue.js 的 @event。

<div x-data="{ count: 0 }">
    <button x-on:click="count++">点击我</button>
    <p>点击次数：<span x-text="count"></span></p>
</div>

功能：x-on 监听用户交互事件（如点击、输入、鼠标移动等）。

6. `x-model`

x-model 用于双向绑定输入值。

<div x-data="{ inputValue: '' }">
    <input type="text" x-model="inputValue" />
    <p>你输入的内容是：<span x-text="inputValue"></span></p>
</div>

功能：实现输入框的双向绑定。

7. `x-text`

x-text 用于动态更新元素的文本内容。

<div x-data="{ message: 'Hello, Alpine.js!' }">
    <p x-text="message"></p>
</div>

功能：x-text 将数据渲染为纯文本。

8. `x-html`

x-html 用于动态更新 HTML 内容。

<div x-data="{ htmlContent: '<strong>加粗的文字</strong>' }">
    <div x-html="htmlContent"></div>
</div>

功能：插入 HTML，而不仅是纯文本。

9. `x-if`

x-if 用于条件渲染，动态决定是否插入元素。

<div x-data="{ show: true }">
    <button @click="show = !show">切换</button>
    <template x-if="show">
        <p>这是条件渲染的内容。</p>
    </template>
</div>

功能：x-if 动态插入或移除 DOM 元素。

10. `x-for`

x-for 用于循环渲染列表。

<div x-data="{ items: ['苹果', '香蕉', '橙子'] }">
    <ul>
        <template x-for="item in items" :key="item">
            <li x-text="item"></li>
        </template>
    </ul>
</div>

功能：x-for 实现循环渲染。

11. `x-transition`

x-transition 用于为元素添加过渡动画。

<div x-data="{ show: false }">
    <button @click="show = !show">切换显示</button>
    <div x-show="show" x-transition>
        这是一个带动画效果的元素。
    </div>
</div>

功能：为显示/隐藏元素添加动画效果。

12. `x-cloak`

x-cloak 防止 Alpine.js 初始化前显示元素。

<div x-data x-cloak>
    <p>页面加载后才会显示我。</p>
</div>

功能：x-cloak 和 CSS 结合使用，隐藏未初始化的元素。

[x-cloak] {
    display: none;
}

13. `x-ref`

x-ref 获取元素的引用。

<div x-data="{ focusInput() { this.$refs.input.focus() } }">
    <input x-ref="input" type="text" />
    <button @click="focusInput()">聚焦输入框</button>
</div>

功能：通过 $refs 引用 DOM 元素，便于操作。

14. `x-effect`

x-effect 监听数据变化并执行代码。

<div x-data="{ count: 0 }">
    <button @click="count++">增加</button>
    <p x-effect="console.log('当前计数：', count)"></p>
</div>

功能：自动监听数据变化并触发副作用。

15. `x-ignore`

x-ignore 忽略元素及其子元素的 Alpine.js 解析。

<div x-data>
    <div x-ignore>
        <p>{{ 这个内容不会被 Alpine.js 解析 }}</p>
    </div>
</div>

功能：阻止 Alpine.js 对某些元素进行解析。

总结

Alpine.js 的 15 个核心属性提供了丰富的功能，能够轻松实现动态交互效果。它们覆盖了数据绑定、事件监听、条件渲染、列表渲染、动画、DOM 操作等常见的前端开发场景。

以下是一个综合示例，将多个属性结合在一起使用：

<div x-data="{ items: ['苹果', '香蕉', '橙子'], newItem: '' }" x-init="console.log('组件加载完成')">
    <input type="text" x-model="newItem" placeholder="添加新项目" />
    <button @click="items.push(newItem); newItem = ''">添加</button>
    <ul>
        <template x-for="item in items" :key="item">
            <li>
                <span x-text="item"></span>
                <button @click="items = items.filter(i => i !== item)">删除</button>
            </li>
        </template>
    </ul>
</div>

通过 Alpine.js 的这些属性，我们可以快速开发出功能强大的动态前端页面，而无需引入更复杂的框架。希望本文对你使用 Alpine.js 有所帮助！

6 个 Properties 全局属性

Alpine.js 提供了 6 个内置的全局属性（Properties），这些属性是 Alpine.js 的核心工具，帮助开发者在组件中操作数据、访问 DOM 或触发方法。

这些属性一般以 $ 开头，类似于其他框架中的全局对象（例如 Vue.js 的 $refs、$emit 等）。

在本教程中，我们将逐一介绍 Alpine.js 的 6 个核心 Properties，并通过示例展示它们在实际开发中的使用方式。

1. `$el`

$el 表示当前 Alpine.js 组件的根 DOM 元素。

用法：当你需要动态操作当前组件的根元素时，可以使用 $el。

<div x-data="{ changeBackground() { this.$el.style.backgroundColor = 'lightblue' } }">
    <button @click="changeBackground()">改变背景颜色</button>
</div>

说明：

在上面的例子中，通过 $el 获取了当前组件的根元素，然后修改了它的背景颜色。

2. `$refs`

$refs 用于获取通过 x-ref 声明的 DOM 元素引用。

用法：通过 x-ref 指定一个引用名称，然后可以使用 $refs 访问该元素。

<div x-data="{ focusInput() { this.$refs.myInput.focus() } }">
    <input x-ref="myInput" type="text" placeholder="点击按钮后聚焦" />
    <button @click="focusInput()">聚焦输入框</button>
</div>

说明：

x-ref="myInput" 为输入框定义了一个引用名称。
在按钮点击时，通过 $refs.myInput 获取输入框元素，并调用其 focus() 方法。

3. `$store`

$store 用于访问 Alpine.js 的全局状态管理（需要启用 Stores 功能，Alpine.js v3.2+ 开始支持）。

用法：全局 Store 是通过 Alpine.store() 定义的，可以在任何组件中通过 $store 访问。

定义一个全局 Store：

<script>
    document.addEventListener('alpine:init', () => {
        Alpine.store('counter', {
            count: 0,
            increment() {
                this.count++;
            }
        });
    });
</script>

<div x-data>
    <button @click="$store.counter.increment()">增加</button>
    <p>全局计数：<span x-text="$store.counter.count"></span></p>
</div>

说明：

$store.counter 访问了名为 counter 的全局 Store。
Store 是一个共享状态，多个组件可以同时访问和操作它。

4. `$watch`

$watch 用于监听数据变化，并在数据发生变化时执行某些逻辑。

用法：通过 $watch 可以动态监听 Alpine.js 数据的变化，类似于 Vue.js 的 watch。

<div x-data="{ message: '', count: 0 }" x-init="$watch('message', value => { count = value.length })">
    <input type="text" x-model="message" placeholder="输入一些内容" />
    <p>输入的字符长度：<span x-text="count"></span></p>
</div>

说明：

$watch('message', callback) 监听了 message 数据的变化。
每次 message 的值发生变化时，回调函数都会执行，并更新 count 的值。

5. `$dispatch`

$dispatch 用于触发自定义事件，并可以在父组件或其他地方监听这些事件。

用法：通过 $dispatch 创建事件冒泡机制，简化组件间的通信。

<!-- 子组件 -->
<div x-data="{ sendMessage() { this.$dispatch('custom-event', { message: 'Hello from child!' }) } }">
    <button @click="sendMessage()">发送事件</button>
</div>

<!-- 父组件 -->
<div x-data @custom-event.window="console.log($event.detail.message)">
    <p>打开控制台，点击按钮查看事件消息</p>
</div>

说明：

子组件通过 $dispatch 发送了一个名为 custom-event 的事件，并附带 detail 数据。
父组件监听了 custom-event 事件，并通过 $event.detail 获取事件数据。

6. `$nextTick`

$nextTick 用于在 DOM 更新完成后执行回调函数。

用法：当你在数据变化后，想保证 DOM 已经更新完成才执行某些操作时，可以使用 $nextTick。

<div x-data="{ count: 0, logCount() { this.count++; this.$nextTick(() => { console.log('计数更新为：', this.count); }); } }">
    <button @click="logCount()">增加并打印计数</button>
</div>

说明：

$nextTick 在数据更新后，等待 DOM 更新完成再执行回调函数。
在上面的例子中，console.log 确保了在最新的 DOM 状态下打印 count 的值。

综合示例：结合多个 Properties 使用

以下是一个综合示例，展示如何同时使用 $refs、$watch 和 $dispatch 等属性：

<script>
    document.addEventListener('alpine:init', () => {
        Alpine.store('appState', {
            items: [],
            addItem(item) {
                this.items.push(item);
            }
        });
    });
</script>

<div x-data="{ newItem: '', addItem() { this.$store.appState.addItem(this.newItem); this.newItem = ''; this.$nextTick(() => { this.$refs.input.focus(); }); } }">
    <input x-ref="input" x-model="newItem" @keypress.enter="addItem()" placeholder="输入项目并回车" />
    <button @click="addItem()">添加项目</button>
    
    <ul>
        <template x-for="item in $store.appState.items" :key="item">
            <li x-text="item"></li>
        </template>
    </ul>
</div>

功能：

使用 $store 管理全局状态 appState。
使用 $refs 获取输入框的引用，并在添加项目后聚焦。
使用 $nextTick 确保 DOM 更新完成后再聚焦输入框。

总结

Alpine.js 的 6 个 Properties 为开发者提供了一套灵活的工具，几乎可以满足大部分动态交互的需求：

$el：操作根元素。
$refs：获取 DOM 元素引用。
$store：管理全局状态。
$watch：监听数据变化。
$dispatch：触发自定义事件。
$nextTick：DOM 更新后执行逻辑。

这些工具与 Alpine.js 的声明式语法完美结合，可以轻松构建功能强大的前端交互。希望本文能够帮助你更好地掌握 Alpine.js 的核心属性！

2 个 Methods 全局方法

Alpine.js 提供了两个非常重要的全局方法，用于管理和扩展它的功能。这两个方法分别是：

Alpine.data()
Alpine.store()

这两个方法主要用于定义组件的数据和全局状态管理。它们可以帮助开发者更好地组织代码，提升代码的复用性和可扩展性。

1. `Alpine.data()`

用途

Alpine.data() 用于定义 组件的可复用数据模型，为组件提供更清晰的逻辑分离和复用性。通过 Alpine.data() 定义的组件逻辑可以在多个地方重复使用。

用法

Alpine.data('counter', () => ({
    count: 0,
    increment() {
        this.count++;
    },
    decrement() {
        this.count--;
    }
}));

示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Alpine.data 示例</title>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn.min.js" defer></script>
    <script>
        document.addEventListener('alpine:init', () => {
            // 定义一个组件数据模型
            Alpine.data('counter', () => ({
                count: 0,
                increment() {
                    this.count++;
                },
                decrement() {
                    this.count--;
                }
            }));
        });
    </script>
</head>
<body>
    <!-- 使用定义的 counter 组件 -->
    <div x-data="counter">
        <button @click="decrement">减少</button>
        <span x-text="count"></span>
        <button @click="increment">增加</button>
    </div>

    <!-- 可以在多个地方复用 -->
    <div x-data="counter">
        <button @click="decrement">减少</button>
        <span x-text="count"></span>
        <button @click="increment">增加</button>
    </div>
</body>
</html>

说明

Alpine.data() 定义了一个名为 counter 的组件数据模型。
任何地方通过 x-data="counter" 使用时，都会创建一个独立的 counter 组件实例。
组件内的逻辑清晰且易于复用。

2. `Alpine.store()`

用途

Alpine.store() 用于定义 全局状态，实现跨组件的状态共享。它类似于常见框架（如 Vue.js、React）的全局状态管理工具。

用法

Alpine.store('appState', {
    count: 0,
    increment() {
        this.count++;
    },
    decrement() {
        this.count--;
    }
});

示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Alpine.store 示例</title>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn.min.js" defer></script>
    <script>
        document.addEventListener('alpine:init', () => {
            // 定义全局状态
            Alpine.store('appState', {
                count: 0,
                increment() {
                    this.count++;
                },
                decrement() {
                    this.count--;
                }
            });
        });
    </script>
</head>
<body>
    <!-- 共享全局状态 -->
    <div x-data>
        <button @click="$store.appState.decrement()">减少</button>
        <span x-text="$store.appState.count"></span>
        <button @click="$store.appState.increment()">增加</button>
    </div>

    <!-- 在另一个组件中共享同一个状态 -->
    <div x-data>
        <button @click="$store.appState.decrement()">减少</button>
        <span x-text="$store.appState.count"></span>
        <button @click="$store.appState.increment()">增加</button>
    </div>
</body>
</html>

说明

Alpine.store() 定义一个全局状态 appState。
使用 $store 可以在任意组件中访问该全局状态。
跨组件共享状态非常方便，适合管理全局的计数器、用户信息、主题设置等。

`Alpine.data()` 与 `Alpine.store()` 的对比

特性	`Alpine.data()`	`Alpine.store()`
定义的作用范围	仅限于当前组件	全局共享状态
是否独立实例化	每次使用都会创建一个新实例	所有组件共享同一个实例
适用场景	定义组件内部数据和逻辑	定义全局状态（如用户信息、主题等）
访问方式	`x-data="组件名"`	`$store.状态名`

综合示例：结合 `Alpine.data()` 和 `Alpine.store()`

以下是一个综合示例，展示如何同时使用 Alpine.data() 和 Alpine.store() 来实现局部组件逻辑和全局状态共享。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Alpine.js 综合示例</title>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn.min.js" defer></script>
    <script>
        document.addEventListener('alpine:init', () => {
            // 定义全局状态
            Alpine.store('user', {
                name: 'John Doe',
                age: 25,
                increaseAge() {
                    this.age++;
                }
            });

            // 定义一个组件数据模型
            Alpine.data('profile', () => ({
                isEditing: false,
                editName(newName) {
                    this.$store.user.name = newName;
                    this.isEditing = false;
                }
            }));
        });
    </script>
</head>
<body>
    <!-- 使用全局状态 -->
    <div x-data>
        <h1>用户信息</h1>
        <p>姓名：<span x-text="$store.user.name"></span></p>
        <p>年龄：<span x-text="$store.user.age"></span></p>
        <button @click="$store.user.increaseAge()">增加年龄</button>
    </div>

    <!-- 使用局部组件逻辑 -->
    <div x-data="profile">
        <h2>编辑用户信息</h2>
        <template x-if="!isEditing">
            <button @click="isEditing = true">编辑姓名</button>
        </template>
        <template x-if="isEditing">
            <input type="text" x-model.lazy="$store.user.name" />
            <button @click="editName($store.user.name)">保存</button>
        </template>
    </div>
</body>
</html>

功能说明

全局状态管理：
- 使用 Alpine.store() 定义用户的全局状态，包括姓名和年龄。
- 任意组件都可以访问和修改全局状态。
局部组件逻辑：
- 使用 Alpine.data() 定义了一个局部的 profile 组件，用于控制编辑状态和保存用户信息的逻辑。
- isEditing 控制编辑模式的开关。

总结

Alpine.data()：适合于定义组件级的数据和逻辑，支持高度复用。
Alpine.store()：适合于定义全局状态，解决跨组件的状态管理问题。

通过这两个方法，Alpine.js 不仅能快速构建简单的组件，还可以实现复杂的状态共享和逻辑分离，满足用户界面的动态需求。在日常开发中，可以根据具体场景选择使用这两种方法，从而让代码更加简洁和易于维护！

插件

Alpine.js 是一个轻量级的 JavaScript 框架，它还有丰富的插件生态，用于扩展其功能。这些插件为开发者提供了更加强大的工具，帮助处理常见的交互需求，比如动画、持久化状态、全局事件、工具提示等。

以下是一些常用的 Alpine.js 插件，并包含它们的安装和使用教程。

1. Alpine.js 插件列表

官方插件

Alpine.js 提供了一些官方插件，功能强大且易于集成：

Alpine Plugins：
- @alpinejs/persist：数据持久化（存储数据到 localStorage 或 sessionStorage）。
- @alpinejs/collapse：折叠与展开功能（动画支持）。
- @alpinejs/intersect：滚动观察（Intersection Observer）。
- @alpinejs/trap：焦点捕获（适用于模态框/弹窗）。
- @alpinejs/mask：输入遮罩（如格式化日期、电话号码等输入）。
- @alpinejs/focus：增强焦点管理功能。
- @alpinejs/morph：DOM 差异处理工具（类似于 Vue 和 React 的 diff 功能）。

第三方插件

以下是一些优秀的社区贡献插件：

alpine-tooltip：显示工具提示。
alpine-prefetch：预加载链接内容。
alpine-confirm：内置确认对话框支持。

2. Alpine.js 插件安装

使用 CDN 安装插件

对于简单的使用场景，可以使用 CDN 链接加载插件。例如：

<script src="https://cdn.jsdelivr.net/npm/@alpinejs/persist" defer></script>
<script src="https://cdn.jsdelivr.net/npm/@alpinejs/collapse" defer></script>
<script>
    document.addEventListener('alpine:init', () => {
        // 启用插件
        Alpine.plugin(persist);
        Alpine.plugin(collapse);
    });
</script>

使用 npm 安装插件

如果你使用模块化打包工具（如 Webpack 或 Vite），可以通过 npm 安装插件：

# 安装 Alpine.js 和相关插件
npm install alpinejs @alpinejs/persist @alpinejs/collapse

然后在你的 JavaScript 文件中引入插件：

import Alpine from 'alpinejs';
import persist from '@alpinejs/persist';
import collapse from '@alpinejs/collapse';

// 注册插件
Alpine.plugin(persist);
Alpine.plugin(collapse);

// 初始化 Alpine.js
window.Alpine = Alpine;
Alpine.start();

3. Alpine.js 插件教程

官方插件使用教程

3.1 `@alpinejs/persist` - 数据持久化

persist 插件允许你将数据存储到 localStorage 或 sessionStorage。当用户刷新页面时，数据不会丢失。

安装：

<script src="https://cdn.jsdelivr.net/npm/@alpinejs/persist" defer></script>

使用：

<div x-data="{ count: $persist(0) }">
    <button @click="count++">增加</button>
    <p>当前计数：<span x-text="count"></span></p>
</div>

说明：

$persist(0) 将 count 初始化为 0，并将其存储到 localStorage。
如果需要使用 sessionStorage，可以使用 $persist(value).as('session')。

示例：

<div x-data="{ name: $persist('John').as('session') }">
    <input type="text" x-model="name" />
    <p>Hello, <span x-text="name"></span></p>
</div>

3.2 `@alpinejs/collapse` - 折叠与展开

collapse 插件提供了折叠和展开动画，适用于手风琴组件、下拉菜单等场景。

安装：

<script src="https://cdn.jsdelivr.net/npm/@alpinejs/collapse" defer></script>

使用：

<div x-data>
    <button @click="$refs.content.classList.toggle('hidden')">切换内容</button>
    <div x-collapse x-ref="content" class="hidden">
        <p>这是可以折叠的内容。</p>
    </div>
</div>

说明：

x-collapse 为元素添加折叠交互，使用 CSS 动画实现过渡效果。

3.3 `@alpinejs/intersect` - 滚动观察

intersect 插件基于 Intersection Observer API，用于检测元素是否进入视口。

安装：

<script src="https://cdn.jsdelivr.net/npm/@alpinejs/intersect" defer></script>

使用：

<div x-data x-intersect:enter="console.log('元素进入视口')">
    <p>向下滚动查看日志</p>
</div>

示例：懒加载图片

<img x-data x-intersect="$el.src = 'example.jpg'" data-src="example.jpg" alt="图片描述" />

3.4 `@alpinejs/trap` - 焦点捕获

trap 插件用于锁定焦点在特定区域内，常用于模态框或弹窗。

安装：

<script src="https://cdn.jsdelivr.net/npm/@alpinejs/trap" defer></script>

使用：

<div x-data="{ open: false }">
    <button @click="open = true">打开模态框</button>

    <div x-trap="open" x-show="open" style="display: none;">
        <p>这是一个模态框。</p>
        <button @click="open = false">关闭</button>
    </div>
</div>

说明：

当 x-trap 激活时，焦点会被锁定在模态框内，直到 open = false。

3.5 `@alpinejs/mask` - 输入遮罩

mask 插件为输入字段添加格式化功能，适合处理日期、电话号码等格式输入。

安装：

<script src="https://cdn.jsdelivr.net/npm/@alpinejs/mask" defer></script>

使用：

<div x-data>
    <input x-mask="999-999-9999" placeholder="输入电话号码" />
</div>

示例：日期格式化

<input x-mask="99/99/9999" placeholder="MM/DD/YYYY" />

第三方插件使用教程

3.6 `alpine-tooltip` - 工具提示

工具提示插件提供了简单的工具提示功能。

安装：

<script src="https://cdn.jsdelivr.net/npm/alpine-tooltip@latest" defer></script>

使用：

<div x-data>
    <button x-tooltip="'这是一个提示'">鼠标悬停</button>
</div>

3.7 `alpine-confirm` - 确认对话框

安装：

<script src="https://cdn.jsdelivr.net/npm/alpine-confirm@latest" defer></script>

使用：

<div x-data>
    <button @click="$confirm('确定删除此项？').then(() => { console.log('确认'); }).catch(() => { console.log('取消'); })">
        删除
    </button>
</div>

总结

Alpine.js 插件的设计使得开发者可以轻松扩展框架的功能，避免重复造轮子。使用 Alpine.js 插件，你可以快速实现复杂的交互需求，如数据持久化、动画效果、焦点管理、格式化输入等。

常用插件对比：

插件名	功能	场景示例
`@alpinejs/persist`	数据状态持久化	保存用户偏好、表单内容等
`@alpinejs/collapse`	折叠动画	手风琴组件、菜单折叠
`@alpinejs/intersect`	滚动观察	懒加载内容、元素进入视口的动画
`@alpinejs/trap`	锁定焦点	模态框、对话框
`@alpinejs/mask`	输入格式化	电话号码、日期输入
`alpine-tooltip`	工具提示	显示悬停信息
`alpine-confirm`	确认对话框	操作确认提示

通过合理使用这些插件，你可以让你的项目更加高效和优雅！

Alpine.js 的特点

快速上手

15 个 Attributes 核心属性

1. x-data

2. x-init

3. x-show

4. x-bind

5. x-on

6. x-model

7. x-text

8. x-html

9. x-if

10. x-for

11. x-transition

12. x-cloak

13. x-ref

14. x-effect

15. x-ignore

总结

6 个 Properties 全局属性

1. $el

2. $refs

3. $store

4. $watch

5. $dispatch

6. $nextTick