Alpine.js Quick Reference Cheat Sheet

Define um escopo de dados para o componente.

x-data="{ open: false }"

Alterna a visibilidade (display: none) baseada em uma condição.

x-show="open"

Escuta eventos do DOM (atalho @click).

x-on:click="open = !open"

Vincula dinamicamente atributos ou classes (atalho :class).

x-bind:class="{ 'active': open }"

Two-way data binding para inputs.

x-model="message"

Atualiza o texto interno de um elemento.

x-text="message"

Executa código quando o componente é inicializado.

x-init="console.log('Iniciado')"