Hace tiempo hablamos sobre librerías y frameworks para desarrollo web en este enlace:
https://alquimistadecodigo.blogspot.com/2024/08/frameworks-y-librerias-para-desarrollar.htmlEn Javascript existen decenas de librerías y frameworks que ofrecen la panacea universal a los desarrolladores web. Alpine JS es uno de ellos.
Alpine JS es un framework ligero que ofrece las características reactivas y declarativas de frameworks más robustos como Vue JS o React. De cierta manera es considerado un jQuery moderno.
Según el sitio oficial posee una colección de:
- 15 atributos.
- 6 propiedades.
- 2 métodos.
Comenzaremos con los atributos:
Atributos
| Atributo | Descripción |
|---|---|
| x-data | Declarar un nuevo componente Alpine y sus datos para un bloque de HTML. |
| x-bind | Establecer dinámicamente atributos HTML en un elemento. |
| x-on | Escuchar eventos del navegador en un elemento. |
| x-text | Establecer el contenido de texto de un elemento. |
| x-html | Establecer el HTML interno de un elemento. |
| x-model | Sincronizar un dato con un elemento de entrada. |
| x-show | Alternar la visibilidad de un elemento. |
| x-transition | Hacer la transición de un elemento hacia dentro y hacia fuera usando transiciones CSS. |
| x-for | Repetir un bloque de HTML basado en un conjunto de datos. |
| x-if | Agregar o eliminar condicionalmente un bloque de HTML de la página por completo. |
| x-init | Ejecutar código cuando Alpine inicializa un elemento. |
| x-effect | Ejecutar un script cada vez que una de sus dependencias cambie |
| x-ref | Haga referencia a elementos directamente por sus claves especificadas utilizando la propiedad mágica $refs. |
| x-cloak | Ocultar un bloque de HTML hasta que Alpine haya terminado de inicializar su contenido. |
| x-ignore | Evitar que Alpine inicialice un bloque de HTML. |
Continuamos con las propiedades:
Propiedades
| Propiedad | Descripción |
|---|---|
| $store | Acceda a una tienda global registrada utilizando Alpine.store(...). |
| $el | Hacer referencia al elemento DOM actual. |
| $dispatch | Envía un evento de navegador personalizado desde el elemento actual. |
| $watch | Observa un fragmento de datos y ejecuta la devolución de llamada proporcionada cada vez que cambie. |
| $refs | Hacer referencia a un elemento por clave (especificada mediante x-ref). |
| $nextTick | Espere hasta el próximo "tick" (pintura del navegador) para ejecutar un fragmento de código. |
Finalizamos con los métodos:
Métodos
| Método | Descripción |
|---|---|
| Alpine.data | Reutilizar un objeto de datos y hacer referencia a él mediante x-data |
| Alpine.store | Declare a piece of global, reactive, data that can be accessed from anywhere using $store. |
Para instalar, basta con que descargues la librería y la incluyas en tu página HTML.
Vamos a crear una simple página HTML que muestre unos mensajes.
index.html
<!doctype html> <html lang="es"> <head> <meta charset="UTF-8"> <title> Aprendiendo Alpine JS </title> <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script> </head> <body> <h1 x-data="{ greet: 'Aprendiendo Alpine JS' }" x-text="greet"></h1> <h3 x-data="{ message: 'I ❤️ Alpine' }" x-text="message"></h3> </body> </html>
A primera vista se puede apreciar que es muy similar a Vue JS. Hacemos uso de las propiedades ``x-data`` y ``x-text`` para declarar un componente y establecer texto.
En próximas entregas veremos más ejemplos.
Enlaces:
https://alpinejs.dev/
Comentarios
Publicar un comentario