Este es el segundo artículo sobre el prometedor marco Alpine.js .
El primero se puede leer aquí:
Alpine.js: un marco ligero con una sintaxis conveniente

Continuamos familiarizando a la comunidad con esta maravillosa herramienta.
El código completo de la lección está aquí .

X-SHOW y X-CLOAK

<div x-data="{ show: false }">
  <button x-on:click="show= ! show" x-text="show ? '' : '' ">
  </button>
  <p x-show="show" x-cloak>!</p>
</div>

En el ejemplo anterior, analizaremos dos nuevas directivas a la vez. X-show, aunque es similar en uso a x-if, no debe confundirse. X-show no cambia el árbol de la página, sino que solo controla la propiedad de visualización del elemento. Es decir, el elemento se representará, pero no se mostrará.

X-cloak es una directiva que se elimina inmediatamente después del inicio del script. Parecería, ¿de qué sirve? Considere la aplicación práctica. Cuando ejecutamos el código anterior, por un momento vemos un elemento con el texto "¡Hola!", A pesar del valor falso en la directiva x-show. Aquí x-cloak viene en nuestra ayuda, solo necesita escribirle el siguiente estilo:

[x-cloak] { 
  display: none;
}

Ahora el elemento estará oculto hasta que comience el script.

La aparición y desaparición repentina de un elemento no es muy obvia, por lo tanto, el modificador de transición se utiliza para animar estos eventos.

X-SHOW.TRANSICIÓN

Mejoraremos el código anterior con la ayuda de modificadores:

<div x-data="{ show: false }">
  <button x-on:click="show= ! show" x-text="show ? '': '' ">
  </button>
  <p x-show="show"> NO TRANSITION</p>
  <p x-show.transition="show">TRANSITION</p>
  <p x-show.transition.in.duration.1000ms="show">TRANSITION IN</p>
  <p x-show.transition.out.duration.1000ms="show">TRANSITION OUT</p>
  <p x-show.transition.scale.05.duration.1000ms="show">TRANSITION Scale</p>
  <p x-show.transition.opacity.in.duration.1000ms="show">TRANSITION Opacity</p>
  <p x-show.transition.in.duration.1000ms.out.duration.500ms="show">TRANSITION IN Duration</p>
</div>

1 .in.duration.1000ms

transition ( ) opacity scale ( scale: 0.95), cubic-bezier(0.4, 0.0, 0.2, 1), 150 75 . , .

:

• .in ;
• .out — ;
• .scale — ;
• .opacity — ;
• .duration .

x-if x-transition. x-show. . .

X-INIT

X-init — , , . created Vue.js. x-data. :

<div
  x-data="{ posts: [] }"
  x-init="
    fetch('https://jsonplaceholder.typicode.com/albums/1/photos')
      .then((response) => {
        return response.json();
      })
      .then((data) => {
        posts = data
      });
    "
>
  <template x-for="post in posts" :key="post.id">
    <div class="post">
      <h1 x-text="post.title"></h1>
      <img :src="post.thumbnailUrl" :alt="post.title" />
    </div>
  </template>
  <hr/>
</div>

x-data posts, . x-init fetch json- . x-for «» .

X-REF $REFS

Esta directiva proporciona acceso al elemento deseado en cualquier parte de la página, incluso fuera del componente. Todos los enlaces están disponibles a través del campo global $ refs. Demostremos esta característica usando un ejemplo:

<div x-data="{ }">
  <input type="text" x-ref="myInput"/>
  <button x-on:click="alert($refs.myInput.value)">Alert</button>
<hr />
</div>

El texto ingresado en la entrada con el atributo x-ref = "myInput" estará disponible en $ refs.myInput.value

Esto concluye nuestra lección de hoy. Todos los ejemplos de la lección están aquí .
Todos los proyectos exitosos y hasta pronto!