Preparar un proyecto e instalación de la CDN de Alpine JS

Ya he aclarado un poco lo que es Alpine js que nos permite cómo lo podemos instalar y también te hablé un poquito sobre lo que es la combinación del alpin con Livewire que es el propósito de todo esto vamos a seguir creando un pequeño proyecto para que luego podamos hacer algunos experimentos con ella y precisamente poder conocer un poco más de lo que sería este framework así que para eso como te comentaba en la introducción tenemos dos formas una es empleando node y la otra es empleando el CDN realmente para un proyecto real No hay excusa para no emplear node esta sería la la mejor opción ya que con esto tenemos todas las ventajas que nos ofrece el ambiente de node pero para estos casos que queremos experimentar un poco yo diría que la parte del cdn nos queda bastante bien no hace falta complicarse mucho con lo que serían Node así que es la que yo voy a emplear pero perfectamente si tú quieres emplear esta e inclusive hacer todos estos desarrollos en una página aparte en el proyecto de iw siéntete libre de hacerlo si quieres tener todo ahí yo lo voy a hacer aquí aparte para como te digo no mezclar tanto las cosas así que pues lo único que te pido aquí es que te crees aquí una ventana nueva de visual Studio code o lo agregas al otro proyecto como tú quieras.

Para poder usar Alpine JS, lo podemos hacer mediante Node:

$ npm i alpinejs

O mediante la CDN:

<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>

La CDN va a ser la vía que se usará en este libro al ser la más sencilla por ende, la más recomendada para comenzar.

Una aplicación en Alpine consta de dos partes:
La declaración de la data, mediante el atributo x-data.
La parte funcional, que es empleando la lógica que implementes usando las características de Alpine.

Alpine está basado en componentes, que son independientes entre ellos y son los englobados por el bloque de x-data como iremos viendo.

X Data la clave de los componentes de Alpine

Por aquí el evento click al igual que ocurre con Vue y similares y aquí gacemos como quien dice el javascript recordemos que en Vue podemos colocar el método o directamente la expresión en este caso aquí colocamos la expresión que sería normalito en javascript la variable que declaramos aquí arriba igual a true sería todo entonces en base a lo explicado aquí se va a mostrar esto al igual que ocurre con Vue esto está aquí cuando esto sea true se va a renderizar todo esto si es falso simplemente no se renderiza, este es el ejemplo de la documentación oficial:

<div x-data="{ open: false }">
    <button @click="open = true">Expand</button>
 
    <span x-show="open">
        Content...
    </span>
</div>

Eso es lo que hacemos regresamos por aquí y recargamos ahí tenemos el botón fíjate que si damos un click sobre el botón nuestro SPAN  aparece con el display none que era lo que te comentaba en caso de que no hayas bueno no conozcas Vue esto lo que hace esa es la diferencia entre el IF y el SHIW Aunque eso lo vemos más adelante esto lo que hace es ocultarlo mediante un display none tal cual puedes ver.

16-11-2024 - Andrés Cruz

In english

• Categoría
• /
• JavaScript
• /
• Preparar un proyecto e instalación de la CDN de Alpine JS