Ini adalah artikel kedua tentang kerangka kerja Alpine.js yang menjanjikan .
Yang pertama dapat dibaca di sini:
Alpine.js - kerangka kerja ringan dengan sintaksis yang mudah digunakan

Kami terus membiasakan masyarakat dengan alat yang luar biasa ini.
Kode pelajaran lengkap ada di sini .

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

Dalam contoh di atas, kami akan menganalisis dua arahan baru sekaligus. X-show, meskipun serupa digunakan untuk x-if, jangan bingung. X-show tidak mengubah susunan halaman, tetapi hanya mengontrol properti tampilan elemen. Artinya, item tersebut akan dirender, tetapi tidak ditampilkan.

X-cloak adalah arahan yang dihapus segera setelah inisiasi skrip. Tampaknya, apa gunanya itu? Pertimbangkan aplikasi praktisnya. Ketika kita menjalankan kode di atas, untuk sesaat kita melihat sebuah elemen dengan teks "Halo!", Terlepas dari nilai yang salah dalam direktif pertunjukan-x. Di sini x-jubah datang untuk membantu kami, Anda hanya perlu menulis kepadanya gaya berikut:

[x-cloak] { 
  display: none;
}

Sekarang elemen akan disembunyikan sampai skrip dimulai.

Kemunculan dan lenyapnya elemen secara tiba-tiba tidak terlalu jelas, sehingga pengubah transisi. Digunakan untuk menghidupkan peristiwa ini.

X-SHOW.TRANSISI

Kami akan meningkatkan kode sebelumnya dengan bantuan pengubah:

<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

Arahan ini memberikan akses ke elemen yang diinginkan di bagian mana pun dari halaman, termasuk di luar komponen. Semua tautan tersedia melalui bidang global $ referensi. Mari kita tunjukkan fitur ini menggunakan contoh:

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

Teks yang dimasukkan dalam input dengan atribut x-ref = "myInput" akan tersedia dalam $ refs.myInput.value

Ini mengakhiri pelajaran kita hari ini. Semua contoh pelajaran ada di sini .
Semua proyek sukses dan sampai jumpa lagi!