Sintaxis básica y directivas
Sintaxis básica y directivas
Section titled “Sintaxis básica y directivas”Alpine.js utiliza atributos personalizados (directivas) en el HTML, como x-data, x-bind, x-on, etc., para añadir reactividad y lógica.
Principales directivas de Alpine.js
Section titled “Principales directivas de Alpine.js”1. x-data
Section titled “1. x-data”Define el estado local del componente. Es el punto de entrada para Alpine.js.
<div x-data="{ count: 0 }"><span x-text="count"></span></div>2. x-init
Section titled “2. x-init”Ejecuta código cuando el componente se inicializa.
<div x-data x-init="console.log('Componente listo')">...</div>3. x-bind
Section titled “3. x-bind”Enlaza atributos HTML a datos de Alpine.
<button x-data="{ disabled: true }" :disabled="disabled">Botón</button>4. x-on
Section titled “4. x-on”Escucha y responde a eventos del DOM. Se puede usar la sintaxis abreviada @.
<button x-on:click="alert('¡Hola!')">Haz clic</button><!-- o --><button @click="alert('¡Hola!')">Haz clic</button>5. x-show
Section titled “5. x-show”Muestra u oculta elementos condicionalmente (usa display: none).
<div x-data="{ visible: true }"><p x-show="visible">Visible si 'visible' es true</p></div>6. x-if
Section titled “6. x-if”Renderiza elementos condicionalmente (elimina/agrega del DOM).
<template x-if="loggedIn"><span>Bienvenido</span></template>7. x-model
Section titled “7. x-model”Enlaza datos bidireccionalmente con inputs.
<input x-data="{ nombre: '' }" x-model="nombre" placeholder="Tu nombre" />8. x-for
Section titled “8. x-for”Renderiza listas de elementos.
<ul x-data="{ items: ['A', 'B', 'C'] }"><template x-for="item in items" :key="item"> <li x-text="item"></li></template></ul>Otras directivas útiles de Alpine.js
Section titled “Otras directivas útiles de Alpine.js”9. x-html
Section titled “9. x-html”Permite renderizar HTML dinámico de forma segura (¡cuidado con XSS!).
<div x-data="{ contenido: '<b>Texto en negrita</b>' }"><div x-html="contenido"></div></div>10. x-text
Section titled “10. x-text”Establece el texto de un elemento de forma reactiva.
<div x-data="{ mensaje: 'Hola mundo' }"><span x-text="mensaje"></span></div>11. x-cloak
Section titled “11. x-cloak”Oculta el elemento hasta que Alpine.js haya inicializado el DOM.
<div x-data x-cloak><p>Este contenido se muestra solo cuando Alpine está listo.</p></div><style>[x-cloak] { display: none; }</style>12. x-teleport
Section titled “12. x-teleport”Mueve el contenido a otro lugar del DOM (útil para modales, tooltips, etc.).
<div x-data="{ abierto: false }"><button @click="abierto = true">Abrir modal</button><div x-teleport="#modales" x-show="abierto"> <p>¡Soy un modal!</p> <button @click="abierto = false">Cerrar</button></div></div><div id="modales"></div>13. x-id
Section titled “13. x-id”Genera identificadores únicos para elementos.
<div x-data="{ id: $id('input') }"><label :for="id">Nombre</label><input :id="id" type="text" /></div>14. x-ignore
Section titled “14. x-ignore”Evita que Alpine.js procese un elemento y sus hijos.
<div x-ignore><script>/* Este bloque no será procesado por Alpine */</script></div>15. x-effect
Section titled “15. x-effect”Ejecuta una expresión cada vez que cambian las dependencias reactivas usadas dentro de ella.
<div x-data="{ count: 0 }"><button @click="count++">Incrementar</button><span x-effect="console.log(count)"></span></div>16. x-ref y $refs
Section titled “16. x-ref y $refs”Permite referenciar elementos del DOM para manipularlos desde el código Alpine.
<div x-data="{ enfocar() { this.$refs.input.focus() } }"><input x-ref="input" type="text" /><button @click="enfocar()">Foco</button></div>17. x-transition
Section titled “17. x-transition”Agrega animaciones de entrada y salida a los elementos.
<div x-data="{ visible: false }"><button @click="visible = !visible">Mostrar/Ocultar</button><div x-show="visible" x-transition> <p>Animación de transición</p></div></div>18. x-intersect (plugin)
Section titled “18. x-intersect (plugin)”Detecta cuando un elemento entra o sale del viewport.
<div x-data x-intersect:enter="console.log('Entró al viewport')">Observa la consola al hacer scroll</div>19. x-collapse (plugin)
Section titled “19. x-collapse (plugin)”Agrega animaciones de colapso/expansión.
<div x-data="{ abierto: false }"><button @click="abierto = !abierto">Toggle</button><div x-show="abierto" x-collapse> Contenido colapsable animado</div></div>20. x-mask (plugin)
Section titled “20. x-mask (plugin)”Permite aplicar máscaras de entrada a los campos de formulario.
<input x-data x-mask="99/99/9999" placeholder="DD/MM/AAAA" />