VueJS - Rendering (Terjemahan ke Bahasa Indonesia)

Hai teman, superstar Vue.js masa depan! Saya sangat senang menjadi panduanmu dalam perjalanan menarik ini ke dunia rendering Vue.js. Sebagai seseorang yang telah mengajar pemrograman selama tahun tahun, saya dapat menjamin bahwa menguasai rendering adalah seperti belajar menggambar - itu adalah cara kita membawakan digital canvases kita kehidupan! Jadi, mari kita susun lengan dan masuk ke dalam!

Rendering Kondisional

Bayangkan Anda adalah seorang ahli magik, dan Anda ingin membuat hal-hal muncul atau menghilang di halaman web Anda dengan sekejap gerak pergelangan tangan. Itu sebenarnya apa yang bisa Anda lakukan dengan rendering kondisional di Vue.js! Ini tentang menampilkan atau menyembunyikan elemen berdasarkan kondisi tertentu.

Direktif v-if

Direktif v-if adalah trik pertama di saku kita. Itu seperti seorang pengawal di klub, memutuskan siapa yang bisa masuk dan siapa yang tidak.

<div id="app">
<h1 v-if="isVisible">Sekarang kamu melihatku!</h1>
</div>

<script>
new Vue({
el: '#app',
data: {
isVisible: true
}
})
</script>

Dalam contoh ini, elemen <h1> hanya akan muncul jika isVisible adalah true. Jika itu false, poof! Elemen itu menghilang dari DOM sepenuhnya. Itu tidak hanya disembunyikan - itu hilang, seperti itu tidak pernah ada!

Direktif v-else dan v-else-if

Sekarang, mari kita tambahkan sedikit magi ke pertunjukan kita dengan v-else dan v-else-if:

<div id="app">
<div v-if="temperature < 0">Itu dingin sekali!</div>
<div v-else-if="temperature < 20">Itu dingin.</div>
<div v-else>Itu hangat!</div>
</div>

<script>
new Vue({
el: '#app',
data: {
temperature: 25
}
})
</script>

Di sini, kita menciptakan sebuah laporan cuaca kecil. Bergantung pada nilai temperature, pesan yang berbeda akan muncul. Itu seperti memiliki beberapa lubang panggung - hanya satu yang bisa terbuka pada saat yang sama!

Direktif v-show

kadang-kadang, kita ingin sedikit bersembunyi. Enter v-show:

<div id="app">
<h1 v-show="isVisible">Saya selalu disini, hanya kadang-kadang tak terlihat!</h1>
</div>

<script>
new Vue({
el: '#app',
data: {
isVisible: true
}
})
</script>

Tak seperti v-if, v-show tidak menghapus elemen dari DOM. Itu hanya menyembunyikannya menggunakan CSS. Picturing itu sebagai melempar cahaya tak tampak ke elemenmu daripada membuatnya menghilang sepenuhnya.

Rendering Daftar

Sekarang kita sudah menguasai membuat hal-hal muncul dan menghilang, mari kita belajar bagaimana membuat banyak elemen dari satu template. Ini di mana rendering daftar membantu!

Direktif v-for

Direktif v-for adalah seperti mesin salin magik. Itu mengambil template dan menyalinnya untuk setiap item di dalam array atau objek.

<div id="app">
<ul>
<li v-for="fruit in fruits">{{ fruit }}</li>
</ul>
</div>

<script>
new Vue({
el: '#app',
data: {
fruits: ['Apel', 'Pisang', 'Ceri', ' kurma']
}
})
</script>

Dalam contoh ini, kita menciptakan daftar belanja buah. Direktif v-for mengiterasi setiap buah di dalam array fruits dan membuat elemen <li> baru untuknya. Itu seperti memiliki tim kecil para goblin, masing-masing menulis nama buah di lembaran kertas baru!

Menggunakan v-for dengan Objek

v-for tidak hanya untuk array - itu juga bekerja dengan objek!

<div id="app">
<ul>
<li v-for="(value, key) in person">{{ key }}: {{ value }}</li>
</ul>
</div>

<script>
new Vue({
el: '#app',
data: {
person: {
name: 'Alice',
age: 28,
job: ' Pengembang'
}
}
})
</script>

Di sini, kita menampilkan informasi tentang seorang. Direktif v-for mengiterasi setiap properti objek person, membuat elemen <li> baru untuk setiap pasangan key-value.

v-for dengan Rentang

Ingin membuat jumlah elemen tertentu? v-for bisa melakukan itu juga!

<div id="app">
<span v-for="n in 5">{{ n }} </span>
</div>

Ini akan menampilkan angka 1 hingga 5. Itu seperti meminta Vue untuk menghitung untuk Anda!

Atribut Key

Ketika menggunakan v-for, penting untuk memberikan setiap elemen yang dirender atribut key yang unik. Ini membantu Vue meng-track item mana yang telah berubah, ditambahkan, atau dihapus.

<div id="app">
<ul>
<li v-for="fruit in fruits" :key="fruit.id">
{{ fruit.name }}
</li>
</ul>
</div>

<script>
new Vue({
el: '#app',
data: {
fruits: [
{ id: 1, name: 'Apel' },
{ id: 2, name: 'Pisang' },
{ id: 3, name: 'Ceri' }
]
}
})
</script>

Picturing key sebagai nametag untuk setiap elemen. Itu membantu Vue mengenali siapa siapa ketika daftar berubah.

Tabel Metode

Berikut adalah tabel praktis yang menggabungkan metode yang kita pelajari:

Direktif	Tujuan	Contoh
v-if	Render elemen secara kondisional	<div v-if="isVisible">Hai</div>
v-else	Menyediakan alternatif saat v-if salah	<div v-else>Sampai jumpa</div>
v-else-if	Menyediakan kondisi tambahan	<div v-else-if="isSpecial">Special</div>
v-show	Toggle visibilitas elemen	<div v-show="isVisible">Selalu di DOM</div>
v-for	Render daftar item	<li v-for="item in items">{{ item }}</li>

Dan itu adalah, murid-murid yang antusias! Kita telah melihat dasar-dasar rendering di Vue.js. Ingat, latihan membuat sempurna, jadi jangan khawatir untuk mencoba konsep ini. Sebelum kamu sadar, kamu akan dapat merender komponen Vue.js seperti seorang pro, menciptakan halaman web dinamis dan interaktif yang akan memukau pengguna Anda. Tetap kode, tetap belajar, dan terutama, tetap bersenang-senang!

Credits: Image by storyset