Akhirnya ada waktu lagi buat nulis setelah seminggu kemarin disibukan dengan banyak hal duniawi ~~ Udah ah pembelaannya, lanjut ke tema Vue selanjutnya Component & Template.
Component biasanya digunakan jika ada satu struktur html yang mungkin akan digunakan berkali-kali, intinya dengan component ini nantinya reusable. Ambil contoh, dalam halaman website biasanya akan ada satu bagian/komponen yang digunakan berulang-ulang, sebut saja struktur menu. Kalau di php atau framework php macam laravel sih mudah, kalau di js atau html saja ? Kadang perlu dibuat banyak.
Langsung saja, salin skrip html berikut.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Component & Template</title>
<script src="https://vuejs.org/js/vue.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<div id="app">
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">Catatan belajar Vue2</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
</ul>
</div>
</nav>
<p>
{{ text }}
</p>
</div>
</body>
<script>
new Vue({
el: '#app',
data: {
text: 'Hello World'
}
})
</script>
</html>
Hasilnya seperti ini
Struktur menu di atas masih di dalam html belum diproses “secara vue”, untuk mengubahnya kita perlu extend Vue.Component, ubah skrip di atas menjadi seperti berikut.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Component & Template</title>
<script src="https://vuejs.org/js/vue.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<div id="app">
<app-menu></app-menu>
<p>
{{ text }}
</p>
</div>
</body>
<script>
Vue.component('app-menu', {
template: '<nav class="navbar navbar-default">\
<div class="container-fluid">\
<div class="navbar-header">\
<a class="navbar-brand" href="#">Catatan belajar Vue2</a>\
</div>\
<ul class="nav navbar-nav">\
<li class="active"><a href="#">Home</a></li>\
<li><a href="#">Page 1</a></li>\
<li><a href="#">Page 2</a></li>\
</ul>\
</div>\
</nav>'
})
new Vue({
el: '#app',
data: {
text: 'Hello World'
}
})
</script>
</html>
Kalau diakses kembali hasilnya akan sama, namun ada yang membedakan diantaranya :
Vue.Component
Pada bagian ini saya membuat component baru dengan nama app-menu di dalam componenttersebut terdapat properti template yang isinya string html, nah yang perlu diperhatikan di sini adalah strutkur html hanya boleh 1 master tag, contoh pada skrip di sini master atau tag utamanya adalah <nav>.
Vue.component('app-menu', {
template: '<nav class="navbar navbar-default">\
<div class="container-fluid">\
<div class="navbar-header">\
<a class="navbar-brand" href="#">Catatan belajar Vue2</a>\
</div>\
<ul class="nav navbar-nav">\
<li class="active"><a href="#">Home</a></li>\
<li><a href="#">Page 1</a></li>\
<li><a href="#">Page 2</a></li>\
</ul>\
</div>\
</nav>'
})
Tag Baru
Jika diperhatikan ada tag baru di dalam skrip html yaitu <app-menu></app-menu>, tag tersebut merupakan implementasi dari component yang saya buat tadi, saran sih jika membuat atau memberi nama component jangan menggunakan tag html yang sudah ada, kasih nama apa kek terserah.
Component juga gak cuma ngomongin template, di dalamnya bisa nyimpen data juga, lihat contoh
<!DOCTYPE html>
<html lang="en">
<head>
<title>Component & Template</title>
<script src="https://vuejs.org/js/vue.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<div id="app">
<app-menu></app-menu>
<p>
{{ text }}
</p>
</div>
</body>
<script>
Vue.component('app-menu', {
data: function(){
return {
menus: [{
nama: "Home",
active: true
},
{
nama: "Page 1",
active: false
},
{
nama: "Page 2",
active: false
}
]
}
},
template: '<nav class="navbar navbar-default">\
<div class="container-fluid">\
<div class="navbar-header">\
<a class="navbar-brand" href="#">Catatan belajar Vue2</a>\
</div>\
<ul class="nav navbar-nav">\
<li v-for="menu in menus" v-bind:class="{ active : menu.active }" ><a href="#">{{ menu.nama }}</a></li>\
</ul>\
</div>\
</nav>'
})
new Vue({
el: '#app',
data: {
text: 'Hello World'
}
})
</script>
</html>
Kalau di akses lagi tampilannya sih sama, cara render html nya yang beda.
Sebenarnya ada cara lebih baik dalam memanfaatkan component ini, tapi itu dalam 2 tulisan selanjutnya, karena tulisan selanjutnya itu mau nyobain dulu vue-cli.
Referensi
- https://www.youtube.com/watch?v=kskV1q4iokk&index=7&list=PL55RiY5tL51p-YU-Uw90qQH419BM4Iz07
- https://vuejs.org/v2/guide/components.html