Alpine.js指南
指令参考
| 指令 | 说明 |
|---|---|
| x-data | 声明组件数据范围 |
| x-init | 初始化时运行代码 |
| x-show | 切换可见性（CSS） |
| x-if | 条件渲染（DOM） |
| x-for | 循环渲染 |
| x-bind | 绑定属性（:attr简写） |
| x-on | 监听事件（@event简写） |
| x-model | 双向数据绑定 |
| x-text | 设置文本内容 |
| x-html | 设置HTML内容 |
| x-ref | 存储元素引用 |
| x-cloak | Alpine加载完成前隐藏 |
| x-transition | 添加CSS过渡 |
计数器示例
<div x-data="{ count: 0 }">
<button @click="count--">-</button>
<span x-text="count"></span>
<button @click="count++">+</button>
</div>
获取数据
<div x-data="{
users: [],
async init() {
const res = await fetch('/api/users');
this.users = await res.json();
}
}">
<template x-for="user in users" :key="user.id">
<div>
<span x-text="user.name"></span>
<a :href="'/users/' + user.id">View</a>
</div>
</template>
</div>
Alpine.data 可复用组件
Alpine.data('dropdown', () => ({
open: false,
toggle() { this.open = !this.open; },
close() { this.open = false; }
}));
// HTML 使用
<div x-data="dropdown">
<button @click="toggle">Menu</button>
<div x-show="open" @click.outside="close">
<!-- 下拉内容 -->
</div>
</div>