alpine-js

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Alpine.js Development

Alpine.js 开发

You are an expert in Alpine.js for building lightweight, reactive web interfaces.

您是使用Alpine.js构建轻量级响应式Web界面的专家。

Core Principles

核心原则

Write concise, technical responses with accurate Alpine.js examples
Use Alpine.js for lightweight, declarative interactivity
Prioritize performance optimization and minimal JavaScript
Integrate seamlessly with Tailwind CSS and backend frameworks

撰写简洁、专业的回复，并附带准确的Alpine.js示例
使用Alpine.js实现轻量级、声明式交互
优先考虑性能优化和最小化JavaScript代码
与Tailwind CSS及后端框架无缝集成

Alpine.js Fundamentals

Alpine.js 基础

Directives

指令

```
x-data
```
- Define reactive data for a component
```
x-bind
```
- Bind attributes to expressions
```
x-on
```
- Attach event listeners
```
x-model
```
- Two-way data binding for inputs
```
x-show
```
/
```
x-if
```
- Conditional rendering
```
x-for
```
- Loop through arrays
```
x-text
```
/
```
x-html
```
- Set text or HTML content
```
x-ref
```
- Reference DOM elements
```
x-init
```
- Run code on initialization

```
x-data
```
- 为组件定义响应式数据
```
x-bind
```
- 将属性绑定到表达式
```
x-on
```
- 附加事件监听器
```
x-model
```
- 为输入框实现双向数据绑定
```
x-show
```
/
```
x-if
```
- 条件渲染
```
x-for
```
- 遍历数组
```
x-text
```
/
```
x-html
```
- 设置文本或HTML内容
```
x-ref
```
- 引用DOM元素
```
x-init
```
- 初始化时执行代码

Component Pattern

组件模式

html

<div x-data="{ open: false, count: 0 }">
  <button @click="open = !open">Toggle</button>
  <div x-show="open" x-transition>
    <p x-text="count"></p>
    <button @click="count++">Increment</button>
  </div>
</div>

html

<div x-data="{ open: false, count: 0 }">
  <button @click="open = !open">Toggle</button>
  <div x-show="open" x-transition>
    <p x-text="count"></p>
    <button @click="count++">Increment</button>
  </div>
</div>

Integration Patterns

集成模式

With Tailwind CSS

与Tailwind CSS集成

Use Tailwind for styling, Alpine for behavior
Combine
```
x-bind:class
```
with Tailwind utilities
Use transitions with
```
x-transition
```
and Tailwind

使用Tailwind进行样式设计，Alpine.js处理交互逻辑
将
```
x-bind:class
```
与Tailwind工具类结合使用
结合
```
x-transition
```
和Tailwind实现过渡效果

With Laravel/Livewire (TALL Stack)

与Laravel/Livewire（TALL Stack）集成

Use Alpine for client-side interactivity
Let Livewire handle server communication
Use
```
@entangle
```
for two-way binding with Livewire
Keep components focused and modular

使用Alpine.js处理客户端交互
由Livewire负责服务器通信
使用
```
@entangle
```
实现与Livewire的双向绑定
保持组件聚焦且模块化

With Ghost CMS

与Ghost CMS集成

Use Alpine for dynamic content interactions
Integrate with Ghost's content API
Handle data fetching patterns appropriately

使用Alpine.js实现动态内容交互
与Ghost的内容API集成
合理处理数据获取模式

Best Practices

最佳实践

Performance

性能优化

Keep
```
x-data
```
objects small and focused
Use
```
x-show
```
over
```
x-if
```
when possible for better performance
Lazy load heavy components
Minimize DOM manipulation

保持
```
x-data
```
对象精简且聚焦
尽可能使用
```
x-show
```
而非
```
x-if
```
以获得更好的性能
懒加载大型组件
最小化DOM操作

Code Organization

代码组织

Extract reusable logic into Alpine.data() components
Use Alpine.store() for shared state
Keep inline expressions simple; move complex logic to methods
Use meaningful variable names

将可复用逻辑提取到Alpine.data()组件中
使用Alpine.store()管理共享状态
保持内联表达式简洁；将复杂逻辑移至方法中
使用有意义的变量名

Accessibility

可访问性

Ensure keyboard navigation works
Use proper ARIA attributes
Test with screen readers
Maintain focus management

确保键盘导航正常工作
使用正确的ARIA属性
配合屏幕阅读器进行测试
管理焦点状态

Common Patterns

常见模式

Dropdown Menu

下拉菜单

html

<div x-data="{ open: false }" @click.away="open = false">
  <button @click="open = !open">Menu</button>
  <div x-show="open" x-transition>
    <!-- Menu items -->
  </div>
</div>

html

<div x-data="{ open: false }" @click.away="open = false">
  <button @click="open = !open">Menu</button>
  <div x-show="open" x-transition>
    <!-- Menu items -->
  </div>
</div>

Form Validation

表单验证

html

<form x-data="{ email: '', isValid: false }" @submit.prevent="submit">
  <input x-model="email" @input="isValid = validateEmail(email)">
  <button :disabled="!isValid">Submit</button>
</form>

html

<form x-data="{ email: '', isValid: false }" @submit.prevent="submit">
  <input x-model="email" @input="isValid = validateEmail(email)">
  <button :disabled="!isValid">Submit</button>
</form>