Ada banyak framework JavaScript, tetapi kesederhanaan dan kemudahan penggunaan Alpine menjadikannya kandidat yang sangat baik untuk pemula.

Dunia pengembangan web kacau—kerangka kerja muncul dan menghilang dan hal-hal dapat membuat kewalahan baik bagi pengembang baru maupun yang berpengalaman.

Tidak seperti kebanyakan kerangka kerja pengembangan web, Alpine.js bertujuan sesederhana mungkin, namun cukup kuat untuk menangani konsep seperti reaktivitas dan efek samping.

Memulai Dengan Alpine.js

Menginstal Alpine.js cukup sederhana. Anda hanya perlu menyertakan yang berikut ini naskah tag di HTML Anda:

<naskahmenundasrc=" https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn.min.js">naskah>

Atau, Anda dapat menginstal Alpine.js di proyek Anda menggunakan Node Package Manager:

npm instal alpinejs

Reaktivitas di Alpine.js

Buat sebuah index.htm file dan tambahkan kode boilerplate berikut:

html>
<htmllang="en">
<kepala>
<metacharset="UTF-8">
<metahttp-setara="Kompatibel dengan X-UA"isi="IE = tepi">
<metanama="area pandang"isi="width=device-width, initial-scale=1.0">





instagram viewer



<judul>Alpine.jsjudul>
kepala>
<tubuh>
<naskahmenundasrc=" https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn.min.js">naskah>
tubuh>
html>

Itu menunda atribut di naskah tag memberi tahu browser untuk menjalankan skrip hanya setelah selesai mengurai dokumen.

Alpine.js menyediakan beberapa arahan seperti x-data yang digunakan untuk menyimpan data dan x-teks yang digunakannya untuk mengatur innerText dari komponen yang terpasang. Untuk menggunakan arahan ini, tambahkan kode berikut ke HTML Anda.

<divx-data="{nama:'David Uzondu', organisasi:'Manfaatkan'}">
 Nama saya adalah <kuatx-teks="nama">kuat>
 Dan <Sayax-teks="organisasi">Saya> Mengagumkan
div>

Arahan x-data menyimpan objek dengan kunci nama Dan organisasi. Anda kemudian dapat meneruskan kunci tersebut ke direktif x-teks. Saat Anda menjalankan kode, Alpine.js akan mengisi nilainya:

Bagaimana Alpine.js Dibandingkan Dengan React

Alpine.js adalah kerangka kerja ringan yang membuatnya cocok untuk mengembangkan proyek dan prototipe kecil.

Dalam kerangka kerja yang lebih besar seperti Bereaksi, Anda menggunakan kait seperti useEffect() untuk menangani efek samping dalam siklus hidup komponen. Pengait ini menjalankan fungsi callback setiap kali salah satu elemen array dependensi berubah:

impor {useEffect} dari"Reaksi";
fungsiKomponen Saya() {
 gunakanEfek(() => {
/* Fungsi panggilan balik di sini */
 }, [ /* Array dependensi bersifat opsional */ ]);
}

Untuk menangani efek samping di Alpine.js, Anda dapat menggunakan efek x pengarahan. Misalnya, katakanlah Anda ingin menonton variabel dan mencatat nilainya setiap kali berubah:

<divx-data="{nomor 1}"efek x="konsol.log (nomor)">
<h1x-teks="nomor">h1>
<tombol @klik="bilangan = bilangan + 1">Tambahkan nomor barutombol>
div>

Hal pertama yang mungkin Anda perhatikan adalah Anda tidak perlu menentukan ketergantungan. Alpine hanya akan mendengarkan perubahan di semua variabel yang diteruskan efek x. Itu @klik direktif menambah variabel angka dengan 1.

Rendering Bersyarat di Alpine.js

Merender elemen secara kondisional adalah sesuatu yang dapat Anda lakukan dalam kerangka kerja seperti React. Alpine.js juga memungkinkan Anda merender elemen secara kondisional. Ini menyediakan x-jika direktif dan khusus templat elemen yang dapat Anda gunakan untuk merender elemen secara kondisional.

Buat yang lain index.htm file dan tambahkan kode boilerplate yang sama seperti sebelumnya. Tambahkan kode berikut ke badan HTML.

<divx-data="{ditampilkan: benar}">
<tombol @klik="ditampilkan=!ditampilkan"x-teks="ditampilkan? 'Sembunyikan Elemen': 'Tampilkan Elemen'">Beralihtombol>
<templatx-jika="ditampilkan">
<div>Rubah coklat cepat melompati anjing itu.div>
templat>
div>

Itu x-jika direktif diteruskan ke templat elemen. Ini penting karena memungkinkan Alpine.js melacak elemen yang ditambahkan atau dihapus dari halaman. Itu templat elemen harus berisi satu elemen tingkat root; kode berikut akan melanggar aturan itu:

<templatx-jika="ditampilkan">
<div>Elemen ini akan dirender dengan baik.div>
<div>Elemen ini akan diabaikan oleh Alpine.jsdiv>
templat>

Membangun Aplikasi To-Do Dengan Alpine.js

Saatnya menggabungkan semua yang telah Anda pelajari sejauh ini dan membuat aplikasi tugas sederhana dengan dukungan penyimpanan lokal. Pertama, buat folder dan isi dengan index.htm berkas dan a style.css mengajukan. Tambahkan kode boilerplate ke file index.htm dan sertakan referensi ke style.css mengajukan:

<tautanrel="lembar gaya"href="style.css">

Jangan khawatir tentang CSS di sini, salin saja style.css berkas dari ini repositori GitHub proyek.

Untuk mempertahankan data setelah halaman dimuat ulang, Anda memerlukan Alpine.js bertahan plugin. Tambahkan build CDN dari plugin ini sebagai a naskah tag, tepat di atas CDN build Alpine.js inti:

<naskahmenundasrc=" https://cdn.jsdelivr.net/npm/@alpinejs/[email protected]/dist/cdn.min.js">naskah>

Dalam tubuh tentukan a div elemen dengan an x-data pengarahan. Arahan ini harus berisi array yang dipanggil allTasks. Kemudian, tambahkan sebuah h1 elemen dengan teks "To-Do Application".

<divx-data="{allTasks:$persist([])}">
<h1>Aplikasi Agendah1>
div>

Itu $bertahan plugin adalah pembungkus untuk Penyimpanan lokal JavaScript API. Ini memberi tahu browser untuk menyimpan array di penyimpanan lokal, sehingga data tetap utuh bahkan setelah halaman dimuat ulang. Tambah sebuah membentuk dengan kirim direktif yang juga mencegah tindakan pengiriman default.

<membentuk @kirim.cegah="
 ($refs.task.value.trim().length && !allTasks.map (x=>x.task).includes($refs.task.value.trim()))
? allTasks = [{tugas: $refs.task.value.trim(), id: Date.now(), selesai: false}].concat (allTasks)
: $refs.tugas.nilai.trim() '' 
? alert('Masukan nilai tidak boleh kosong')
: alert('Tugas sudah ditambahkan.');
 $refs.tugas.nilai=''
">
membentuk>

Itu $referensi klausa memungkinkan akses ke elemen DOM dengan "tugas" x-ref pengarahan. Kode juga menangani beberapa validasi dan memastikan tidak menambahkan string kosong atau tugas duplikat ke dalam daftar. Sebelum mengakhiri formulir, tambahkan an memasukkan elemen dengan an x-ref dari "tugas" dan placeholder. Kemudian tambahkan tombol dan setel tipenya ke "kirim".

<memasukkanjenis="teks"x-ref="tugas">
<tomboljenis="kirim">Tambahkan Tugastombol>

Selanjutnya, tentukan div dengan kelas "item". Div ini harus berisi dua div lainnya: satu dengan the x-data setel ke larik "belum selesai" dan set lainnya ke larik "selesai". Kedua div harus memiliki efek x direktif dan array harus dibungkus dalam $bertahan klausa seperti yang ditunjukkan sebelumnya.

<divkelas="barang">
<divx-data="{belum selesai:$bertahan([])}"efek x="belum selesai = allTasks.filter (x=>x.donefalse)">
div>

<divx-data="{selesai:$bertahan([])}"efek x="selesai=semuaTasks.filter (y=>y.donetrue).reverse()">
div>
div>

Di div pertama, tambahkan an h3 tag dengan teks "Belum selesai". Kemudian untuk setiap elemen di belum selesai larik, render a div yang memegang "kontrol" dan tugas itu sendiri.

Kontrol memungkinkan pengguna untuk menghapus item atau menandainya sebagai selesai:

<h3>Belum selesaih3>
<templatx-untuk="elemen belum selesai":kunci="elemen.id">
<divx-data="{showControls: false}" @gerakan mouse="showControls = benar" @mouseout="showControls = salah"
 kelas="tugas"
 >


<divkelas="kontrol">
<divx-show="tunjukkan Kontrol" @klik="element.selesai=benar">[M]div>
<divx-show="tunjukkan Kontrol" @klik="allTasks=allTasks.filter (x=>x.id!==element.id)">[R]div>
div>
<divx-teks="elemen.tugas" >div>
div>
templat>

Anda dapat menggunakan x-untuk direktif untuk beralih melalui elemen array dan render. Hal ini mirip dengan v-untuk di Vue dan Array.peta() metode larik di Bereaksi. Div "kontrol" berisi dua div dengan string "[M]" dan "[R]". String ini berarti "Tandai sebagai selesai" dan "Hapus". Anda dapat mengganti ini dengan ikon yang tepat jika diinginkan.

Itu x-show direktif mengatur elemen menampilkan properti CSS ke tidak ada jika nilai yang menunjuk ke arahan itu salah. Div kedua di div "items" mirip dengan yang pertama dengan beberapa pengecualian: The h3 teks diatur ke "Selesai", anak pertama div "kontrol" memiliki teks "[U]" alih-alih "[M]" dan di div ini @klik pengarahan, elemen.selesai diatur ke PALSU.

<divx-show="tunjukkan Kontrol" @klik="elemen.selesai=salah">[U]div>

Dan begitulah, Anda telah mempelajari dasar-dasar Alpine.js dan menggunakan apa yang Anda pelajari untuk membuat aplikasi tugas dasar.

Membuat Kode Alpine.js Lebih Mudah Untuk Ditulis

Saat Anda mulai menulis kode Alpine.js, mungkin sulit untuk memahaminya. Untungnya, editor kode seperti Visual Studio Code menyediakan beragam ekstensi yang memudahkan pengembangan.

Di Extensions Marketplace, Anda bisa mendapatkan ekstensi IntelliSense Alpine.js yang membuatnya lebih mudah untuk bekerja dengan arahan. Ini dapat membantu meningkatkan produktivitas Anda saat menggunakan Alpine.js di proyek Anda.