alpinejs

SKILL.md

Never put complex logic in HTML attributes. If your x-data, x-init, or any directive exceeds 50 characters, extract it.

| x-data | Declare reactive component state | x-data="{ open: false }" | | x-init | Run code on component init | x-init="fetchData()" | | x-show | Toggle visibility (CSS display) | x-show="open" | | x-if | Conditional rendering (must wrap ) | | | x-for | Loop (must wrap ) | | | x-bind: / : | Bind attribute to expression | :class="{ active: isActive }" |

| x-on: / @ | Listen to events | @click="open = !open" | | x-model | Two-way bind form inputs | x-model="email" | | x-text | Set text content | x-text="message" | | x-html | Set inner HTML | x-html="htmlContent" | | x-ref | Reference element via $refs | x-ref="input" |

원본 보기