Home-theater-designers
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.
GUNAKAN VIDEO HARI INI GULIR UNTUK LANJUTKAN DENGAN KONTEN
Memulai Dengan Alpine.js
Menginstal Alpine.js cukup sederhana. Anda hanya perlu menyertakan yang berikut ini naskah tag di HTML Anda:
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
Atau, Anda dapat menginstal Alpine.js di proyek Anda menggunakan Node Package Manager:
npm install alpinejs
Reaktivitas di Alpine.js
Buat sebuah index.htm file dan tambahkan kode boilerplate berikut:
cara menyinkronkan email di android
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Alpine.js</title>
</head>
<body>
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
</body>
</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.
<div x-data="{name:'David Uzondu', organisation:'Make Use Of'}">
My name is <strong x-text="name"></strong>
and <i x-text="organisation"></i> is Awesome
</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:
cara mengecilkan file audio
import {useEffect} from "React";
function MyComponent() {
useEffect(() => {
/* Callback function goes here */
}, [ /* The dependency array is optional */ ]);
}
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:
<div x-data="{number: 1}" x-effect="console.log(number)">
<h1 x-text="number"></h1>
<button @click="number = number + 1">Add new number</button>
</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.
bagaimana cara membuka file .dat
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.
<div x-data="{shown:true}">
<button @click="shown=!shown" x-text="shown ? 'Hide Element' : 'Show Element'">Toggle</button>
<template x-if="shown">
<div>The quick brown fox jumped over the dog.</div>
</template>
</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:
<template x-if="shown">
<div>This element will be rendered just fine.</div>
<div>This element will be ignored by Alpine.js</div>
</template>
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:
<link rel="stylesheet" href="style.css">