VueJS - Rendering

Hello there, future Vue.js superstar! I'm thrilled to be your guide on this exciting journey into the world of Vue.js rendering. As someone who's been teaching programming for years, I can assure you that mastering rendering is like learning to paint – it's how we bring our digital canvases to life! So, let's roll up our sleeves and dive in!

Conditional Rendering

Imagine you're a magician, and you want to make things appear or disappear on your webpage with a flick of your wrist. That's essentially what conditional rendering in Vue.js allows you to do! It's all about showing or hiding elements based on certain conditions.

v-if Directive

The v-if directive is our first trick up our sleeve. It's like a bouncer at a club, deciding who gets in and who doesn't.

<div id="app">
<h1 v-if="isVisible">Now you see me!</h1>
</div>

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

In this example, the <h1> element will only show up if isVisible is true. If it's false, poof! The element disappears from the DOM entirely. It's not just hidden – it's gone, like it never existed!

v-else and v-else-if Directives

Now, let's add some more magic to our show with v-else and v-else-if:

<div id="app">
<div v-if="temperature < 0">It's freezing!</div>
<div v-else-if="temperature < 20">It's cool.</div>
<div v-else>It's warm!</div>
</div>

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

Here, we're creating a little weather report. Depending on the temperature value, different messages will appear. It's like having multiple trap doors on a stage – only one can be open at a time!

v-show Directive

Sometimes, we want to be a bit sneakier. Enter v-show:

<div id="app">
<h1 v-show="isVisible">I'm always here, just sometimes invisible!</h1>
</div>

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

Unlike v-if, v-show doesn't remove the element from the DOM. It just hides it using CSS. Think of it as throwing an invisibility cloak over your element rather than making it disappear entirely.

List Rendering

Now that we've mastered making things appear and disappear, let's learn how to create multiple elements from a single template. This is where list rendering comes in handy!

v-for Directive

The v-for directive is like a magical copy machine. It takes a template and duplicates it for each item in an array or object.

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

<script>
new Vue({
el: '#app',
data: {
fruits: ['Apple', 'Banana', 'Cherry', 'Date']
}
})
</script>

In this example, we're creating a shopping list of fruits. The v-for directive goes through each fruit in our fruits array and creates a new <li> element for it. It's like having a team of tiny elves, each writing down a fruit name on a new piece of paper!

Using v-for with an Object

v-for isn't just for arrays – it works with objects too!

<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: 'Developer'
}
}
})
</script>

Here, we're displaying information about a person. The v-for directive goes through each property of the person object, creating a new <li> for each key-value pair.

v-for with a Range

Want to create a specific number of elements? v-for can do that too!

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

This will display the numbers 1 through 5. It's like asking Vue to count for you!

Key Attribute

When using v-for, it's important to give each rendered element a unique key. This helps Vue keep track of which items have changed, been added, or been removed.

<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: 'Apple' },
{ id: 2, name: 'Banana' },
{ id: 3, name: 'Cherry' }
]
}
})
</script>

Think of the key as a nametag for each element. It helps Vue identify who's who when the list changes.

Methods Table

Here's a handy table summarizing the methods we've learned:

Directive	Purpose	Example
v-if	Conditionally render an element	<div v-if="isVisible">Hello</div>
v-else	Provide an alternative when v-if is false	<div v-else>Goodbye</div>
v-else-if	Provide additional conditions	<div v-else-if="isSpecial">Special</div>
v-show	Toggle an element's visibility	<div v-show="isVisible">Always in DOM</div>
v-for	Render a list of items	<li v-for="item in items">{{ item }}</li>

And there you have it, my eager students! We've covered the basics of rendering in Vue.js. Remember, practice makes perfect, so don't be afraid to experiment with these concepts. Soon, you'll be rendering Vue.js components like a pro, creating dynamic and interactive web pages that will wow your users. Keep coding, keep learning, and most importantly, keep having fun!

VueJS - Penyajian

Hai sana, superstar Vue.js masa depan! Saya begitu gembira untuk menjadi pandu Anda dalam perjalanan yang menarik ke dunia penyajian Vue.js. Sebagai seseorang yang telah mengajar pemrograman selama bertahun-tahun, saya bisa menjamin Anda bahwa menguasai penyajian adalah seperti belajar menggambar – itu adalah cara kita membawakankan kanvas digital kita kehidupan! Jadi, mari kita lipat lengan dan masuk ke dalam!

Penyajian Bertingkat

Bayangkan Anda adalah seorang ahli sihir, dan Anda ingin membuat hal-hal muncul atau hilang di halaman web Anda dengan gesekan pergelangan tangan. Itu sebenarnya apa yang direncanakan oleh penyajian bersyarat di Vue.js! Itu tentang menunjukkan atau menyembunyikan elemen berdasarkan kondisi tertentu.

Direktif v-if

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

<div id="app">
<h1 v-if="isVisible">Now you see me!</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 hilang dari DOM sepenuhnya. Itu tidak hanya disembunyikan – itu hilang, seperti itu tidak pernah ada!

Direktif v-else dan v-else-if

Sekarang, mari tambahkan lebih banyak magi ke pertunjukan kami dengan v-else dan v-else-if:

<div id="app">
<div v-if="temperature < 0">It's freezing!</div>
<div v-else-if="temperature < 20">It's cool.</div>
<div v-else>It's warm!</div>
</div>

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

Di sini, kita membuat 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 menjadi sedikit licik. Enter v-show:

<div id="app">
<h1 v-show="isVisible">I'm always here, just sometimes invisible!</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. Berpikir tentang itu seperti melempar mantel kenabian ke elemen Anda daripada membuatnya menghilang sepenuhnya.

Penyajian Daftar

Sekarang kita telah menguasai membuat hal-hal muncul dan hilang, mari belajar bagaimana membuat banyak elemen dari template tunggal. Ini adalah di mana penyajian daftar menjadi berguna!

Direktif v-for

Direktif v-for adalah seperti mesin salin magis. Itu mengambil template dan menyalinnya untuk setiap item 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: ['Apple', 'Banana', 'Cherry', 'Date']
}
})
</script>

Dalam contoh ini, kita membuat sebuah daftar belanja buah. Direktif v-for mengiterasi setiap buah dalam array fruits dan membuat elemen <li> baru untuknya. Itu seperti memiliki tim kecil para pala, masing-masing menulis nama buah pada 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: 'Developer'
}
}
})
</script>

Di sini, kita menampilkan informasi tentang seorang orang. Direktif v-for mengiterasi setiap properti objek person, membuat <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 bagi Anda!

Atribut Key

Ketika menggunakan v-for, penting untuk memberikan setiap elemen yang disajikan key unik. Ini membantu Vue mengikuti 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: 'Apple' },
{ id: 2, name: 'Banana' },
{ id: 3, name: 'Cherry' }
]
}
})
</script>

Pikirkan key sebagai nametag untuk setiap elemen. Itu membantu Vue mengenali siapa siapa saat daftar berubah.

Tabel Metode

Berikut adalah tabel praktis yang menggabungkan metode yang kita pelajari:

Direktif	Tujuan	Contoh
v-if	Menyajikan elemen secara bersyarat	<div v-if="isVisible">Hello</div>
v-else	Menyediakan alternatif saat v-if salah	<div v-else>Goodbye</div>
v-else-if	Menyediakan kondisi tambahan	<div v-else-if="isSpecial">Special</div>
v-show	Mengubah visibilitas elemen	<div v-show="isVisible">Always in DOM</div>
v-for	Menyajikan daftar item	<li v-for="item in items">{{ item }}</li>

Dan begitu saja, murid-murid yang antusias! Kita telah menutupi dasar-dasar penyajian di Vue.js. Ingat, latihan membuat sempurna, jadi jangan khawatir untuk mencoba konsep ini. Secepatnya, Anda akan menyajikan komponen Vue.js seperti seorang pro, menciptakan halaman web dinamis dan interaktif yang akan mempesona pengguna Anda. Terus mengoding, terus belajar, dan yang paling penting, terus bersenang-senang!

Credits: Image by storyset