Dies ist der zweite Artikel über das vielversprechende Alpine.js- Framework .
Das erste kann hier gelesen werden:
Alpine.js - ein leichtes Framework mit praktischer Syntax

Wir machen die Community weiterhin mit diesem wunderbaren Tool vertraut.
Der vollständige Lektionscode ist hier .

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

Im obigen Beispiel werden zwei neue Richtlinien gleichzeitig analysiert. X-show sollte nicht verwechselt werden, obwohl es ähnlich wie x-if verwendet wird. X-show ändert den Seitenbaum nicht, sondern steuert nur die Anzeigeeigenschaft des Elements. Das heißt, der Artikel wird gerendert, aber nicht angezeigt.

X-cloak ist eine Direktive, die unmittelbar nach der Initiierung des Skripts gelöscht wird. Es scheint, was nützt es? Betrachten Sie die praktische Anwendung. Wenn wir den obigen Code ausführen, sehen wir für einen Moment ein Element mit dem Text "Hallo!", Trotz des falschen Wertes in der x-show-Direktive. Hier hilft uns x-cloak, Sie müssen ihm nur den folgenden Stil schreiben:

[x-cloak] { 
  display: none;
}

Jetzt wird das Element ausgeblendet, bis das Skript gestartet wird.

Das plötzliche Auftreten und Verschwinden eines Elements ist nicht sehr offensichtlich, daher wird der Übergangsmodifikator verwendet, um diese Ereignisse zu animieren.

X-SHOW.TRANSITION

Wir werden den vorherigen Code mit Hilfe von Modifikatoren verbessern:

<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

Diese Anweisung bietet Zugriff auf das gewünschte Element in einem beliebigen Teil der Seite, auch außerhalb der Komponente. Alle Links werden über das globale Feld $ refs verfügbar. Lassen Sie uns diese Funktion anhand eines Beispiels demonstrieren:

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

Text, der in die Eingabe mit dem Attribut x-ref = "myInput" eingegeben wird, ist in $ refs.myInput.value verfügbar

Damit ist unsere heutige Lektion abgeschlossen. Alle Beispiele der Lektion finden Sie hier .
Alle erfolgreichen Projekte und bis bald!