Ceci est le deuxième article sur le cadre prometteur Alpine.js .
Le premier peut être lu ici:
Alpine.js - un framework léger avec une syntaxe pratique

Nous continuons à familiariser la communauté avec ce merveilleux outil.
Le code complet de la leçon est ici .

X-SHOW et 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>

Dans l'exemple ci-dessus, nous analyserons deux nouvelles directives à la fois. X-show, bien que similaire à x-if, ne doit pas être confondu. X-show ne modifie pas l'arborescence des pages, mais contrôle uniquement la propriété d'affichage de l'élément. Autrement dit, l'élément sera rendu, mais pas affiché.

X-cloak est une directive qui est supprimée immédiatement après le lancement du script. Il semblerait, à quoi ça sert? Considérez l'application pratique. Lorsque nous exécutons le code ci-dessus, pendant un instant, nous voyons un élément avec le texte «Bonjour!», Malgré la valeur fausse dans la directive x-show. Ici x-cloak vient à notre aide, il vous suffit de lui écrire le style suivant:

[x-cloak] { 
  display: none;
}

L'élément sera désormais masqué jusqu'au démarrage du script.

L'apparition et la disparition soudaines d'un élément ne sont pas très évidentes, donc le modificateur de transition est utilisé pour animer ces événements.

X-SHOW.TRANSITION

Nous améliorerons le code précédent à l'aide de modificateurs:

<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

Cette directive permet d'accéder à l'élément souhaité dans n'importe quelle partie de la page, y compris en dehors du composant. Tous les liens deviennent disponibles via le champ global $ refs. Montrons cette fonctionnalité à l'aide d'un exemple:

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

Le texte entré en entrée avec l'attribut x-ref = "myInput" sera disponible dans $ refs.myInput.value

Ceci conclut notre leçon d'aujourd'hui. Tous les exemples de la leçon sont ici .
Tous les projets réussis et à bientôt!