Alpine.js Directives

<div x-data="{ message: 'Hello Alpine', count: 0 }">
    <p x-text="message"></p>
    <button @click="count++">点击次数: <span x-text="count"></span></button>
</div>

<div x-data="{ users: [] }" x-init="users = ['Alice', 'Bob', 'Charlie']">
    <ul>
        <template x-for="user in users">
            <li x-text="user"></li>
        </template>
    </ul>
</div>

<div x-data="{ open: false }">
    <button @click="open = !open">切换显示</button>
    <div x-show="open" style="padding: 10px; background: #f0f0f0;">
        这是一个可以显示/隐藏的内容块
    </div>
</div>

<!-- 绑定普通属性 -->
<img x-bind:src="imageUrl" alt="动态图片">

<!-- 绑定 class -->
<div :class="{ 'active': isActive, 'disabled': isDisabled }"></div>

<!-- 绑定 style -->
<div :style="{ color: textColor, fontSize: fontSize + 'px' }"></div>

<!-- 绑定布尔属性 -->
<button :disabled="isSubmitting">提交</button>

html

 code

<!-- 监听点击事件 -->
<button x-on:click="count++">点击</button>

<!-- 简写形式 -->
<button @click="count++">点击</button>

<!-- 获取事件对象 -->
<button @click="handleClick($event)">点击</button>

<!-- 监听多种事件 -->
<div @click="doSomething" @mouseenter="onHover">交互</div>

<!-- 阻止默认行为 -->
<form @submit.prevent="submitForm">
    <button type="submit">提交</button>
</form>

html

 code

<div x-data="{ name: 'Alpine' }">
    <p x-text="name"></p>
    <p x-text="'Hello ' + name"></p>
    <p x-text="status ? '在线' : '离线'"></p>
</div>

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

<!-- 文本输入 -->
<input type="text" x-model="name">
<p>输入的值: <span x-text="name"></span></p>

<!-- 复选框 -->
<input type="checkbox" x-model="agree">
<p>是否同意: <span x-text="agree ? '是' : '否'"></span></p>

<!-- 下拉选择 -->
<select x-model="selected">
    <option value="">请选择</option>
    <option value="a">选项 A</option>
    <option value="b">选项 B</option>
</select>

<!-- 修饰符 -->
<input x-model.lazy="name">     <!-- 失去焦点时同步 -->
<input x-model.number="age">    <!-- 转换为数字 -->
<input x-model.trim="email">   <!-- 去除首尾空格 -->

html

 code

<!-- 子组件 my-modal.html -->
<div x-data="{
    _isOpen: false,
    open() { this._isOpen = true },
    close() { this._isOpen = false },
    isOpen: $modelable('_isOpen')
}">
    <!-- 模态框内容 -->
</div>

<!-- 父组件使用 -->
<my-modal x-model="modalOpen"></my-modal>

html

 code

<!-- 基础列表 -->
<ul>
    <template x-for="item in items" :key="item.id">
        <li x-text="item.name"></li>
    </template>
</ul>

<!-- 带索引的循环 -->
<template x-for="(item, index) in items" :key="item.id">
    <li>
        <span x-text="index + 1"></span>. <span x-text="item.name"></span>
    </li>
</template>

<!-- 遍历对象 -->
<template x-for="(value, key) in object" :key="key">
    <div>
        <span x-text="key"></span>: <span x-text="value"></span>
    </div>
</template>

<!-- 嵌套循环 -->
<template x-for="category in categories">
    <div>
        <h3 x-text="category.name"></h3>
        <ul>
            <template x-for="product in category.products" :key="product.id">
                <li x-text="product.name"></li>
            </template>
        </ul>
    </div>
</template>

html

 code

<!-- 基础使用 -->
<div x-show="show" x-transition>
    内容
</div>

<!-- 自定义过渡类 -->
<div x-show="show" x-transition:enter="transition ease-out duration-300"
     x-transition:enter-start="opacity-0 transform -translate-y-4"
     x-transition:enter-end="opacity-100 transform translate-y-0"
     x-transition:leave="transition ease-in duration-200"
     x-transition:leave-start="opacity-100 transform translate-y-0"
     x-transition:leave-end="opacity-0 transform -translate-y-4">
    内容
</div>

<!-- 过渡时长 -->
<div x-show="show" x-transition.duration.500ms>
    内容
</div>

html

 code

<div x-data="{
    count: 0,
    doubled: 0
}" x-effect="doubled = count * 2">
    <button @click="count++">增加</button>
    <p>原始值: <span x-text="count"></span></p>
    <p>双倍值: <span x-text="doubled"></span></p>
</div>

<div x-data="{ message: 'Alpine 管理的' }">
    <p x-text="message"></p>

    <div x-ignore>
        <!-- 这里的内容不会被 Alpine.js 处理 -->
        <p x-text="message">这段不会显示</p>
    </div>
</div>

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

    <!-- 获取多个 ref -->
    <div x-ref="container"></div>
    <button @click="$refs.container.style.background = 'red'">改变颜色</button>
</div>

html

 code

<!-- 在 HTML 中添加 x-cloak -->
<div x-data="{ message: 'Hello' }" x-cloak>
    <p x-text="message"></p>
</div>

<!-- 需要配合 CSS -->
<style>
    [x-cloak] { display: none !important; }
</style>

<!-- 移动到 body -->
<div x-data="{ show: false }">
    <button @click="show = true">打开模态框</button>

    <template x-teleport="body">
        <div x-show="show" style="position: fixed; inset: 0; background: rgba(0,0,0,0.5);">
            <div style="background: white; padding: 20px; margin: 100px auto; max-width: 400px;">
                <p>这是一个模态框</p>
                <button @click="show = false">关闭</button>
            </div>
        </div>
    </template>
</div>

<!-- 移动到指定选择器的元素 -->
<template x-teleport="#modal-container">
    <div>内容</div>
</template>

html

 code

<div x-data="{ loggedIn: false }">
    <template x-if="loggedIn">
        <div class="user-panel">
            <p>欢迎回来！</p>
            <button @click="loggedIn = false">退出</button>
        </div>
    </template>

    <template x-if="!loggedIn">
        <div class="login-prompt">
            <p>请登录</p>
            <button @click="loggedIn = true">登录</button>
        </div>
    </template>
</div>

html

 code

<div x-data x-id="['text-input', 'text-label']">
    <label :for="$id('text-input')" x-text="$id('text-label')"></label>
    <input type="text" :id="$id('text-input')">
</div>