# Alpine.js
[](https://alpinejs.codewithhugo.com/chat/)
Alpine.js ofrece las propiedades reactivas y declarativas de grandes *frameworks* como Vue o React con un coste mucho menor.
Mantiene el DOM, pudiendo mejorar y perfeccionar el comportamiento como más convenga.
Podríamos considerarlo como un [Tailwind](https://tailwindcss.com/) para JavaScript.
> Nota: La sintaxis de esta herramienta está mayormente inspirada por [Vue](https://vuejs.org/) (y por extensión, de [Angular](https://angularjs.org/))). Estaré agradecido eternamente por lo que han aportado al desarrollo web.
## Instalación
**Desde CDN:** Añade el siguiente script al final de tu sección ``.
```html
```
Eso es todo. Se inicializará solo.
Para entornos de producción, se recomienda especificar una número de versión en concreto en el enlace para evitar comportamientos inesperados que puedan romper las nuevas versiones. Por ejemplo, para usar la versión `2.8.2` (la última):
```html
```
**Desde npm:** Instalar el paquete desde npm.
```js
npm i alpinejs
```
Incluir en tu script.
```js
import 'alpinejs'
```
**Para soporte en IE11** Utilizar los siguientes scripts.
```html
```
El patrón de arriba es el [module/nomodule pattern](https://philipwalton.com/articles/deploying-es2015-code-in-production-today/), que resultará en un empaquetado moderno cargado automáticamente en navegadores modernos, y el empaquetado para IE11 cargado automáticamente en IE11 y otros navegadores de legado.
## Usar
*Desplegable/Modal*
```html
Cuerpo del Desplegable
```
*Pestañas*
```html
Pestaña Foo
Pestaña Bar
```
También se puede utilizar para fines no-triviales:
*Pre-fetching del contenido de un desplegable HTML al pasar el cursor por encima*
```html
Cargando Ruleta...
```
## Aprender
Hay 14 directivas disponibles:
| Directiva | Descripción |
| --- | --- |
| [`x-data`](#x-data) | Declara un nuevo *scope* del componente. |
| [`x-init`](#x-init) | Ejecuta una expresión cuando un componente se inicializa. |
| [`x-show`](#x-show) | Alterna `display: none;` en el elemento dependiendo de la expresión booleana (true o false). |
| [`x-bind`](#x-bind) | Asigna el valor de un atributo a partir de el resultado de una expresión de JS. |
| [`x-on`](#x-on) | Adjunta un evento *listener* al elemento. Ejecuta una expresión de JS cuando se emite el evento. |
| [`x-model`](#x-model) | Añade *"two-way data binding"* al elemento. Mantiene la entrada del elemento sincronizado con los datos del componente. |
| [`x-text`](#x-text) | Funciona similar a `x-bind`, pero actualiza el `innerText` del elemento. |
| [`x-html`](#x-html) | Funciona similar a `x-bind`, pero actualiza el `innerHTML` del elemento. |
| [`x-ref`](#x-ref) | Forma conveniente de extraer elementos crudos del DOM del componente. |
| [`x-if`](#x-if) | Elimina totalmente un elemento del DOM. Debe ser utilizado en una etiqueta ``. |
| [`x-for`](#x-for) | Crea nuevos nodos en el DOM por cada elemento en un arreglo. Debe ser utilizado en una etiqueta ``. |
| [`x-transition`](#x-transition) | Directivas para aplicar clases a varias etapas de la transición del elemento. |
| [`x-spread`](#x-spread) | Permite hacer *bind* de un objeto de las directivas de Alpine a un elemento para mejor reusabilidad. |
| [`x-cloak`](#x-cloak) | Este atributo se elimina cuando Alpine se inicializa. Útil para ocultar el DOM pre-inicializado. |
Y 6 propiedades mágicas:
| Propiedades Mágicas | Descripción |
| --- | --- |
| [`$el`](#el) | Extrae el componente raíz de un nodo del DOM. |
| [`$refs`](#refs) | Extrae elementos del DOM marcados con `x-ref` dentro del componente. |
| [`$event`](#event) | Extrae el objeto "Event" del navegador nativo de dentro de un evento *listener*. |
| [`$dispatch`](#dispatch) | Crea un `CustomEvent` y hace *dispatch* utilizando `.dispatchEvent()` internamente. |
| [`$nextTick`](#nexttick) | Ejecuta la expresión dada DESPUÉS que Alpine ha hecho los cambios reactivos en las actualizaciones del DOM. |
| [`$watch`](#watch) | Ejecuta la *callback* provista cuando una propiedad del componente al cual se ha hecho `watch` cambia. |
## Sponsors
**¿Quieres tu logo aquí? [Escríbe MP en Twitter](https://twitter.com/calebporzio)**
## Proyectos de la Comunidad
* [AlpineJS Weekly Newsletter](https://alpinejs.codewithhugo.com/newsletter/)
* [Spruce (State Management)](https://github.com/ryangjchandler/spruce)
* [Turbolinks Adapter](https://github.com/SimoTod/alpine-turbolinks-adapter)
* [Alpine Magic Helpers](https://github.com/KevinBatdorf/alpine-magic-helpers)
* [Awesome Alpine](https://github.com/ryangjchandler/awesome-alpine)
### Directivas
---
### `x-data`
**Ejemplo:** `
...
`
**Estructura:** `
...
`
`x-data` declara un nuevo *scope* del componente. Indica al *framework* que debe inicializar un nuevo componente con el objeto especificado.
Es análogo a la propiedad `data` de un componente en Vue.
**Extraer Lógica del Componente**
Se pueden extraer datos (y comportamiento) en funciones reutilizables:
```html
// Desplegable
```
> **Para usuarios de bundler**, notad que Alpine.js accede a funciones que están en el *scope* global (`window`), es necesario asignar explicitamente las funciones a `window` para poder usarlas con `x-data`. Por ejemplo, `window.dropdown = function () {}` (eso pasa porque Webpack, Rollup, Parcel etc. pone las funciones que defines en el *scope* del módulo y no de `window`).
También puedes mezclar múltiples tipos de datos usando desestructuración de objetos:
```html
```
---
### `x-init`
**Ejemplo:** ``
**Estructura:** ``
`x-init` ejecuta una expresión cuando se inicializa un componente.
Si deseas ejecutar código DESPUÉS que Alpine haga las actualizaciones iniciales al DOM (similar al *hook* de `mounted()` en VueJS), puedes devolver un *callback* en `x-init`, y se ejecutará después:
`x-init="() => { // aquí tenemos acceso al estado de post-inicialización del DOM // }"`
---
### `x-show`
**Ejemplo:** ``
**Estructura:** ``
`x-show` alterna el estilo `display: none;` del elemento dependiendo de si la expresión evalúa a `true` o `false`.
**x-show.transition**
`x-show.transition` es una API de conveniencia para hacer `x-show`s más agradables utilizando transiciones de CSS.
```html
Estos contenidos entraran y saldrán de transición.
```
| Directiva | Descripción |
| --- | --- |
| `x-show.transition` | A simultaneous fade and scale. (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` | Only transition in. |
| `x-show.transition.out` | Only transition out. |
| `x-show.transition.opacity` | Only use the fade. |
| `x-show.transition.scale` | Only use the scale. |
| `x-show.transition.scale.75` | Customize the CSS scale transform `transform: scale(.75)`. |
| `x-show.transition.duration.200ms` | Sets the "in" transition to 200ms. The out will be set to half that (100ms). |
| `x-show.transition.origin.top.right` | Customize the CSS transform origin `transform-origin: top right`. |
| `x-show.transition.in.duration.200ms.out.duration.50ms` | Different durations for "in" and "out". |
> Nota: Todas esos modificadores de transiciones se pueden usar conjuntamente con cualquiera de los otros. Esto es posible (aunque ridículo lol): `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 a que cualquier hijo acabe de salir de la transición. Si quieres evitar este comportamiento, añade el modificador `.immediate`:
```html
```
---
### `x-bind`
> Nota: Eres libre de usar la sintaxis abreviada ":": `:type="..."`
**Ejemplo:** ``
**Estructura:** ``
`x-bind` asigna el valor de un atributo como el resultado de evaluar una expresión de Javascript. La expresión tiene acceso a todos las claves del objeto de datos del componente, y se actualizará cada vez que se actualizan los datos.
> Nota: *bindings* de atributos SÓLO se actualizan cuando se actualizan las dependencias. El *framework* es lo suficientemente inteligente para observar cambios en los datos y detectar que *bindings* se encargan de esos.
**`x-bind` para atributos de clase**
`x-bind` se comporta un poco distinto cuando hacemos *binding* de un atributo `class`.
Para clases, es necesario pasar un objeto cuyas claves sean los nombres de la clase, y los valores sean expresiones booleanas que determinan si las clases se aplican o no.
Por ejemplo:
``
En este ejemplo, la clase "hidden" solo se aplicará cuando el valor del atributo `foo` sea `true`.
**`x-bind` para atributos booleanos**
`x-bind` da soporte a atributos booleanos del mismo modo que funciona para atributos valuables, utilizando una variable como condicion o cualquier expresión de JavaScript que resuelve a `true` o `false`.
Por ejemplo:
```html
```
Esto añadirá o eliminará el atributo `disabled` cuando `myVar` sea `true` o `false` respectivamente.
Se soportan atributos booleanos de la [especificación de HTML](https://html.spec.whatwg.org/multipage/indices.html#attributes-3:boolean-attribute), por ejemplo `disabled`, `readonly`, `required`, `checked`, `hidden`, `selected`, `open`, etc.
**Modificador `.camel`**
**Ejemplo:** `
**¿Quieres tu logo aquí? [Escríbe MP en Twitter](https://twitter.com/calebporzio)**
## Proyectos de la Comunidad
* [AlpineJS Weekly Newsletter](https://alpinejs.codewithhugo.com/newsletter/)
* [Spruce (State Management)](https://github.com/ryangjchandler/spruce)
* [Turbolinks Adapter](https://github.com/SimoTod/alpine-turbolinks-adapter)
* [Alpine Magic Helpers](https://github.com/KevinBatdorf/alpine-magic-helpers)
* [Awesome Alpine](https://github.com/ryangjchandler/awesome-alpine)
### Directivas
---
### `x-data`
**Ejemplo:** `