Banyak pengembang sangat menyukai sintaksis singkat dan kekuatan arahan Vue.js sehingga mereka bahkan mencoba menggunakan kerangka kerja ini tidak hanya dalam aplikasi satu halaman. Sulit untuk meninggalkan penggunaan reaktivitas, hanya karena tiba-tiba menjadi perlu untuk menulis proyek kecil. Jangan kembali ke jQuery lama yang bagus atau JS murni ?!

Saya harus mengatakan bahwa dalam Vue.js (dan dalam banyak kerangka kerja lain) opsi seperti itu disediakan. Tapi tetap saja tampaknya terlalu rumit untuk operasi yang begitu sederhana, dan fungsinya berlebihan. Dan di sini Alpine.js datang untuk menyelamatkan .

Mari kita perhatikan beberapa fitur dari kerangka ini:

1. Bobotnya sangat sedikit! 7.2kB dalam bentuk terkompresi.
2. Sintaksis berbasis direktif yang familier dan sederhana.
3. Tidak menggunakan DOM virtual
4. Koneksi dimungkinkan baik melalui CDN (sebagaimana dimaksud oleh penulis, ini harus menjadi penggunaan utama) dan melalui npm.

Pertimbangkan contoh paling sederhana menggunakan kerangka ini:

Contoh dasar

    <div x-data="{ msg: 'Hello, Habr!' }">
        <input type="text" x-model="msg" />
        <p x-text="msg"></p>
    </div>

Lihat semua kode artikel di playcode.io

, , x-data. , JSON- . . Dom-, .

x-data="{}"

, , , .

Sekarang kita bebas menggunakan variabel reaktif msg sesuka kita. Sebagai contoh, kami mengaitkan nilai variabel dengan teks <input /> menggunakan direktif model-x. Pengembang berpengalaman telah mengakui di dalamnya model kembar v dari Vue.js. Analogi yang sangat berguna, karena menggunakan keduanya sama-sama identik! Dengan menggantung arahan dengan variabel msg, kita secara otomatis mendapatkan string 'Halo, Habr!' di bidang input. Sekarang kita dapat mengubah nilainya, dan lihat hasilnya di baris berikutnya.

Di sini kita dipaksa untuk mengecewakan banyak orang yang terbiasa dengan sintaks Vue.js dan transfer sederhana dari nilai variabel ke tag menggunakan kurung kurawal, misalnya,

<p>{{ msg }}</p>

harus lulus menggunakan atribut x-text khusus. Atribut x-html disediakan untuk transfer seluruh blok markup.

Berlangganan Acara

    <div x-data="{ counter: 1 }">
      <h1 x-text="counter"></h1>
      <button x-on:click="counter++">+1</button>
    </div>

x-on. Alpine.js , js-, . , , x-on — @. :

<button @click="counter++">+1</button>

x-if:

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

x-if, Vue.js. Boolean . . .

<div x-data="{ items: ['habr', 'hubr', 'hobr'] }">
   <ol>
     <template x-for="item in items" x-bind:key="item">
       <li>
         <p x-text="item"></p>
       </li>
     </template>
  </ol>
</div>

x-for , . , , item. , , item , Alpine . ( ) key. key x-bind. x-for x-if , .

. github.

Alpine.js.

Kami harap Anda menikmatinya.

Proyek yang sukses dan sampai jumpa lagi!

Sebagai permulaan, daftar barang yang akan ditambahkan oleh pencipta Alpine dalam versi berikutnya:

• Arahan khusus
• Komponen
• Dukungan atribut gaya
• Dan banyak lagi...