Ir al contenido principal

Alpine JS

Imagen
De Beta

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.html

En 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:

  1. 15 atributos.
  2. 6 propiedades.
  3. 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/
Etiquetas:

Comentarios

Publicar un comentario