# Alpine.js
[](https://alpinejs.codewithhugo.com/chat/)
O Alpine.js oferece a natureza reativa e declarativa de grandes estruturas, como Vue ou React, a um custo muito menor.
Podemos manter a DOM e aperfeiçoar o comportamento como acharmos melhor.
Pensem nisso como o [Tailwind](https://tailwindcss.com/) para JavaScript.
> Nota: A sintaxe desta ferramenta é quase totalmente inspirada no [Vue](https://vuejs.org/) (e por extensão [Angular](https://angularjs.org/)). Estou eternamente agradecido pelo presente que estas são para a web.
## Instalação
**Via CDN:** Adicionem o seguinte script no final da seção ``.
```html
```
E é isso. Ele vai se inicializar.
Para ambiente de produção, é recomendado fixar o número da versão específico no link para evitar problemas inesperadas das versões mais recentes.
Por exemplo, para usar a versão `2.8.2`:
```html
```
**Via npm:** Instale o pacote pelo npm.
```js
npm i alpinejs
```
Incluir no script.
```js
import 'alpinejs';
```
**Para suportar IE11** Usar os seguintes scripts.
```html
```
O padrão acima é o [padrão de módulo/nomodule](https://philipwalton.com/articles/deploying-es2015-code-in-production-today/) que resulta num pacote moderno carregado automaticamente em browsers modernos e o pacote IE11 carregado automaticamente no IE11 e em outros browsers herdados.
## Usar
_Dropdown/Modal_
```html
Corpo do Dropdown
```
_Tabs_
```html
Tab Foo
Tab Bar
```
Podemos até usá-lo para coisas não triviais:
_Pré pedido de conteudo para o HTML da dropdown ao passar com o rato_.
```html
Carregando Spinner...
```
## Aprenda
Existem 14 diretrizes disponíveis:
| Directiva | Descrição |
| ------------------------------- | ----------------------------------------------------------------------------------------------------------------------------- |
| [`x-data`](#x-data) | Declara um novo scope do componente. |
| [`x-init`](#x-init) | Executa uma expressão quando um componente é inicializado. |
| [`x-show`](#x-show) | Alterna `display: none;` no elemento dependendo da expressão (verdadeiro ou falso). |
| [`x-bind`](#x-bind) | Define o valor de um atributo para o resultado de uma expressão JS. |
| [`x-on`](#x-on) | Anexa um evento de escuta ao elemento. Executa a expressão JS quando emitida. |
| [`x-model`](#x-model) | Adiciona "ligação de dados bidirecional" a um elemento. Mantém o elemento de entrada sincronizado com os dados do componente. |
| [`x-text`](#x-text) | Funciona da mesma forma que o `x-bind`, mas atualiza o `innerText` de um elemento. |
| [`x-html`](#x-html) | Funciona de maneira semelhante ao `x-bind`, mas atualiza o `innerHTML` de um elemento. |
| [`x-ref`](#x-ref) | Maneira conveniente de recuperar elementos DOM fora do seu componente. |
| [`x-if`](#x-if) | Remove um elemento completamente na DOM. Precisa de usar uma tag ``. |
| [`x-for`](#x-for) | Crie novos nós DOM para cada item em uma matriz. Precisa de usar uma tag ``. |
| [`x-transition`](#x-transition) | Diretrizes para aplicar classes a vários estágios da transição de um elemento. |
| [`x-spread`](#x-spread) | Permite definir um objeto de diretivas Alpine, a um elemento para melhor reutilização. |
| [`x-cloak`](#x-cloak) | Este atributo é removido quando o Alpine é inicializado. Útil para ocultar a pré-inicialização da DOM. |
E 6 propriedades mágicas:
| Propriedades Mágicas | Descrição |
| ------------------------ | ---------------------------------------------------------------------------------------------------------------- |
| [`$el`](#el) | Recupere o nó DOM do componente raiz. |
| [`$refs`](#refs) | Recupera elementos DOM marcados com `x-ref` dentro do componente. |
| [`$event`](#event) | Recupera o objeto "Evento" do browser nativo em um evento que estejamos a escuta. |
| [`$dispatch`](#dispatch) | Cria um `CustomEvent` e envio-o usando `.dispatchEvent ()` internamente. |
| [`$nextTick`](#nexttick) | Execute uma determinada expressão APÓS o Alpine fazer suas atualizações reativas na DOM. |
| [`$watch`](#watch) | Disparará um callback fornecida quando uma propriedade do componente que está a "escuta" for alterada. |
## Patrocinadores
**Queres o teu logótipo aqui? [Mensagem pelo Twitter](https://twitter.com/calebporzio)**
## Colaboradores VIP
`
`x-data` declara um novo scope do componente. Diz à estrutura para inicializar um novo componente com o seguinte objeto de dados.
Pensem nisso como a propriedade `data` de um componente Vue.
**Extrair Lógica dos Componentes**
Podemos extrair dados (e comportamentos) em funções reutilizáveis:
```html
// Dropdown
```
> **Para utilizadores do bundler**, observem que o Alpine.js assede a funções que estão no scope global (`window`), vamos necessitar atribuir explicitamente as suas funções à `window` para usá-las com `x- data`, por exemplo `window.dropdown = function () {}` (isso ocorre com Webpack, Rollup, Parcel etc. `function`'s que defenir serão padronizados para o scope do módulo, e não para `window`).
Também podemos misturar vários objetos de dados usando a desestruturação de objetos:
```html
```
---
### `x-init`
**Exemplo:** ``
**Estrutura:** ``
`x-init` executa uma expressão quando um componente é inicializado.
Caso desejem executar o código ANTES do Alpine fazer as atualizações iniciais na DOM (algo como um gancho `mounted ()` no VueJS), podemos retornar um callback do `x-init`, e é executado após:
`x-init="() => { // temos acesso ao estado de pós-inicialização aqui // }"`
---
### `x-show`
**Exemplo:** ``
**Estrutura:** ``
`x-show` alterna o estilo `display: none;` no elemento, dependendo se a expressão for resolvida como `verdadeiro` ou `falso`.
**x-show.transition**
`x-show.transition` é uma API de conveniência para tornar o seu `x-show` mais agradável usando transições CSS.
```html
Esses conteúdos serão transferidos para dentro e para fora.
```
| Diretivas | Descrição |
| ------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------- |
| `x-show.transition` | Desvanecer e escala em simultâneos. (opacity, scale: 0.95, timing-function: cubic-bezier(0.4, 0.0, 0.2, 1), duration-in: 150ms, duration-out: 75ms) |
| `x-show.transition.in` | Apenas transição de entrada. |
| `x-show.transition.out` | Apenas transição de saída. |
| `x-show.transition.opacity` | Apenas transição de desvanecer. |
| `x-show.transition.scale` | Apenas transição de escala. |
| `x-show.transition.scale.75` | Personalizar a transformação de escala CSS `transform: scale(.75)`. |
| `x-show.transition.duration.200ms` | Define a transição "entrada" para 200ms. A saída é ajustada para metade disso (100ms). |
| `x-show.transition.origin.top.right` | Personalizar a origem da transformação CSS `transform-origin: top right`. |
| `x-show.transition.in.duration.200ms.out.duration.50ms` | Durações diferentes para "entrada" e "saída". |
> Nota: Todos esses modificadores de transição podem ser usados em conjunto. Isso é possível (apesar de não fazer sentido): `x-show.transition.in.duration.100ms.origin.top.right.opacity.scale.85.out.duration.200ms.origin.bottom.left.opacity.scale.95`
> Nota: `x-show` espera que todas os filhos terminem a transição. Caso desejem ignorar esse comportamento, adicionem o modificador `.immediate`:
```html
```
---
### `x-bind`
> Nota: Podemos usar uma sintaxe ":" mais curta: `:type =" ... "`
**Exemplo:** ``
**Estrutura:** ``
`x-bind` define o valor de um atributo para o resultado de uma expressão JavaScript. A expressão tem acesso a todas as chaves do objeto de dados do componente e é atualizada sempre que os dados forem atualizados.
> Nota: as ligações de atributo APENAS são atualizadas quando as dependências são atualizadas. A estrutura é inteligente o suficiente para observar alterações nos dados e detectar quais ligações se importam com elas.
**`x-bind` para atributos de classes**
`x-bind` comporta-se de maneira um pouco diferente ao definir o atributo`class`.
Para classes, passamos um objeto cujas as chaves são nomes de classe e valores são expressões booleanas para determinar se esses nomes de classe são aplicados ou não.
Por exemplo: ``
Neste exemplo, a classe "hidden" é aplicada apenas quando o valor do atributo de dados `foo` for `verdadeiro`.
**`x-bind` para atributos booleanos**
O `x-bind` suporta atributos booleanos da mesma maneira que os atributos de valor, usando uma variável como a condição ou qualquer expressão JavaScript que resolva como `verdadeiro` ou `falso`.
Por exemplo:
```html
```
Isso adicionará ou removerá o atributo `disabled` quando`myVar` for verdadeiro ou falso, respectivamente.
Os atributos booleanos são suportados de acordo com a [especificação HTML](https://html.spec.whatwg.org/multipage/indices.html#attributes-3:boolean-attribute), por exemplo `disabled`,`readonly`, `required`, `checked`,`hidden`, `selected`,`open` etc.
**`.camel` modificador**
**Exemplo:** `
**Queres o teu logótipo aqui? [Mensagem pelo Twitter](https://twitter.com/calebporzio)**
## Colaboradores VIP