Mengenal Power Components pada Vue Js

Seperti disinggung sedikit di Mengenal Fitur Andalan Vue Js yaitu Components, Power component dapat dipanggil berulang-ulang, kita akan melanjutkan program sebelumnya. Cara untuk memanggil berulang component cukup mudah.

Kita cukup menuliskan <tebal>x/tebal> berkali-kali, misalnya seperti ini:

<tebal></tebal>
<tebal></tebal>
<tebal></tebal>

Tambahkan beberapa break (tag <br>) agar tulisan lebih rapi, tidak memanjang ke kanan, seperti ini:

<tebal></tebal><br>
<tebal></tebal><br>
<tebal></tebal>

Mari kita terapkan Power Components pada Vue Js, berikut ini kita akan melanjutkan program yang sudah kita buat. Bagi teman-teman yang belum mengikuti bisa juga mempelajarinya disini Mengenal Fitur Andalan Vue Js yaitu Components, atau bisa saja langsung menyimak dari contoh dibawah ini:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<div id="app">
		<tebal></tebal><br>
		<tebal></tebal><br>
		<tebal></tebal><br>
	</div>

	<script src="vue.min.js"></script>
	<script>
		vue.component('tebal', { 
			template: `<b>Teks bold dari Fitur Andalan Vue Js Yaitu Component</b>` 
		}); 

		var app = new Vue({ 
			el: '#app' 
		});
		
	</script>
</body>
</html>

Nah mudahkan teman-teman? Semoga bermanfaat.

Kategori