Alpine es un framework que al tener una estructura tan sencilla, limpia y abstracta, se entiende mejor su magia desde la práctica.

La estructura de Alpine.js está basada en algunas directivas y métodos para realizar las distintas operaciones reactivas y declarativas que nos permite Alpine.js.

Atributos o directivas

Todos estos atributos, son tal cual indica su nombre atributos HTML que deben ser definidos en elementos HTML como DIV, P, SECTION, etc. Y que es interpretado por Alpine para poder crear el componente.

Lógicamente, cada uno de estos atributos, tienen un propósito en particular que se va introducir a continuación:

• x-data Para inicializar las variables con las cuales vamos a trabajar.
• x-show Para mostrar u ocultar un elemento según una condición booleana.
• x-init Mediante una función, permite inicializar variables, llamar a funciones, etc; cualquier procedimiento que quieras hacer antes de construir el componente.
• x-bind Para poder usar el binding de atributos.
• x-if Permite realizar condiciones booleanas para renderizar o remover contenido HTML al cual se encuentra asignado.
• x-show Permite ocultar o mostrar un HTML según una condición booleana.
• x-model Permite enlazar (bidding) un campo de formulario con una variable.
• x-text Permite imprimir el texto de una variable.
• x-html Permite renderizar un contenido HTML en un componente.

Métodos mágicos

En Alpine, tenemos algunos métodos mágicos para realizar distintas operaciones; se diferencian de los atributos a que son funciones, funciones que implementan funcionalidades específicas del framework; entre las principales tenemos:

• $watch() Para observar cambios en las variables y ejecutar un proceso.
• $el() Para obtener la referencia al elemento como si de un selector de JS se tratase.
• $refs() Obtener referencia a cualquier elemento HTML como si de un selector de JS se tratase.
• $store() Almacenar datos de manera global y accesible a cualquier componente de Alpine en una página.
• $nextTick() Es una propiedad mágica que permite ejecutar un bloque de JavaScript después de que Alpine haya realizado sus actualizaciones DOM reactivas.

Eventos

Para el uso de los eventos en Alpine, podemos usar el prefijo de x-on o @; por ejemplo, para el evento click:

1. x-on:click
2. @click

Ahora, vamos a conocer los eventos que se pueden usar en Alpine.js; todos estos eventos permite invocar una función tal cual es el funcionamiento de base que se tiene desde vanilla JavaScript:

• @click Evento click sobre un elemento.
• @keyup Evento de teclado.
• @change Evento utilizado para el cambio de estado o selección de los checkbox, radios, select entre otros.

En cuanto a los eventos que podemos usar, son los mismos del API de JavaScript:

https://www.w3schools.com/js/js_events.asp

 

Este tutorial forma parte de mi libro sobre Alpine.js