🎯 Exemplo 02 - x-data e Conceitos Fundamentais

1. x-data Simples

Framework:

Versão:

x-data define o estado do componente

2. x-data com Múltiplas Propriedades

Usuário:

Email:

Ativo:

Posts:

Propriedades podem ser strings, números, booleans

3. x-data com Métodos

Contador:

Métodos são funções definidas no x-data que podem modificar o estado

4. Getters Computados

Preço Original: R$

Desconto: %

Economia: R$

Preço Final: R$

Getters (get) calculam valores dinâmicos sem chamar uma função

5. Componentes Aninhados (Escopo)

Pai:

Filho:

Cada x-data cria seu próprio escopo

6. Arrays e Objetos

Cores:

  • 1ª cor:
  • 2ª cor:
  • 3ª cor:
  • Total: cores

Pessoa:

Nome:

Idade: anos

Profissão:

Acesse propriedades com notação de ponto (obj.prop) e índices com [index]

7. Operadores e Expressões

A = , B =

Operações Matemáticas:

A + B =

A - B =

A × B =

A ÷ B =

A % B =

Alpine.js suporta todas as operações JavaScript padrão

8. Função init()

init() é executada automaticamente quando o componente é inicializado

Use init() para preparar dados iniciais ou buscar dados da API