Mengenal Fitur Andalan Vue Js yaitu Components

Components merupakan salah satu fitur andalan yang dimiliki Vue.js, components membantu kita dalam mengubah jangkauan dari element dasar html menjadi lebih luas dan fleksibel.

Untuk secara ringkasnya components merupakan sebuah custom dari element html (tag) yang telah ‘ditambahkan’ beberapa kemampuan khusus didalamnya. Tidak hanya berupa custom element html saja, components juga dapat berupa element html baru, atau bahkan sebagai atribut dari element html tersebut. Satu buah komponen dapat berisikan beberapa element html didalamnya, component juga berfungsi sebagai template, nanti akan dipraktikan kemudian.
Cara membuat component adalah:

vue.component('nama_component', {
		isi_component
	});

	var app = new Vue({
		el: '#app'
	});

vue.component('nama_component', {

isi_component

});

var app = new Vue({

el: '#app'

});

Component dituliskan di luar objek vue, seperti pada penulisan diatas, isi component bisa berupa template html (kumpulan beberapa tag-tag html), bisa berupa fungsi data, method, computed property, dll. Setelah component dibuat, saatnya memanggil component yang telah kita buat tersebut, caranya adalah dengan menuliskan nama_component tersebut dalam sebuah element html, seperti

<nama_component></nama_component>

1	<nama_component></nama_component>

Itu konsepnya, Mudah kan? Mari kita lanjut pada implementasi dari components ini dalam sebuah program sederhana, program yang akan kita buat ini akan membuat sebuah component dengan nama. “tebal”, memberinya sebuah nilai, dan kemudian memanggilnya pada file html.

Oke langsung saja ke prakteknya ya teman-teman

Kita buat sebuah component baru dengan nama ‘tebal’:

vue.component('tebal', {
//isi perintah
});

vue.component('tebal', {

//isi perintah

});

lalu kita isi, misalnya kita akan menampilkan sebuah tulisan bercetak tebal dengan isi : “Teks bold dari Fitur Andalan Vue Js Yaitu Component”, agar data yang kita buat dapat dipanggil secara berulang-ulang (dan memang itu tujuan dari pembuatan component), kita letakkan “isi” tersebut didalam sebuah “template”, bukan di data” ya. Kemudian letakkan tulisan bercetak tebal dengan isi seperti diatas pada sebuah template, meletakkannya dimana? letakkan di dalam component, seperti ini:

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

vue.component('tebal', {

});

Dan juga jangan lupa objek Vue Jsnya juga harus tetap ada, jika tidak ada seolah seperti rumah kita yang nanti akan kehilangan koneksinya, so jangan lupa tambahkan ya. Untuk contohnya seperti dibawah ini

vue.compon<code>nt('tebal', { 
template: `<b>Teks bold dari Fitur Andalan Vue Js Yaitu Component</b>` 
});

var app = new Vue({
  el: '#app'
});

vue.compon<code>nt('tebal', {

});

var app = new Vue({

el: '#app'

});

Untuk persiapan Fitur andalan Vue Js yaitu Component sudah selesai, saatnya memanggil component ‘tebal’ yang kita buat tersebut, di file HTML kita. Sebagai contoh seperti berikut ini:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<div id="app">
		<tebal></tebal>
	</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>

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

</div>

vue.component('tebal', {

});

var app = new Vue({

el: '#app'

});

</script>

</body>

</html>

Facebook DUMET School

Categories