Hallo sahabat dumenity berjumpa lagi dalam tutorial kursuswebdesign, pada tutorial kali ini saya akan membahas tentang Apa itu VueJS – Components Part 1. Vue Components adalah salah satu fitur penting dari VueJS yang menciptakan elemen kustom, yang dapat digunakan kembali dalam HTML. Pada artikel kali ini saya akan memberikan contoh tentang apa dan bagaimana sebuah component pada vueJs di gunakan. Silahkan Anda ikuti contoh yang akan saya buat berikut ini, yang akan memberikan pemahaman yang lebih baik tentang cara kerja komponen dengan VueJS.
Sekarang silahkan Anda buat file html seperti dibawah ini, file html digunakan untuk menampilkan data dari component.js berikut file htmlnya.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<html> <head> <title>VueJs Instance</title> <script type = "text/javascript" src = "js/vue.js"></script> </head> <body> <div id = "component_test"> <testcomponent></testcomponent> </div> <div id = "component_test1"> <testcomponent></testcomponent> </div> <script type = "text/javascript" src = "js/component.js"></script> </body> </html> |
sekarang kita buat fungsi componen.js
|
1 2 3 4 5 6 7 8 9 |
Vue.component('testcomponent',{ template : '<div><h1>Hallo..!!! Mari Kita belajar component VueJs</h1></div>' }); var vm = new Vue({ el: '#component_test' }); var vm1 = new Vue({ el: '#component_test1' }); |
Dalam file .html, saya telah membuat dua div dengan id component_test dan component_test1. Dalam file .js yang ditampilkan di atas, dua instance Vue dibuat dengan ID div. saya telah membuat komponen umum untuk digunakan dengan kedua contoh tampilan. Untuk membuat komponen, berikut adalah sintaksnya.
|
1 |
Vue.component('nameofthecomponent',{ // options}); |
Setelah komponen dibuat, nama komponen menjadi elemen kustom dan yang sama dapat digunakan dalam elemen instance Vue yang dibuat, yaitu di dalam div dengan id component_test dan component_test1. Dalam file .js, saya telah menggunakan komponen pengujian sebagai nama komponen dan nama yang sama digunakan sebagai elemen kustom di dalam div.
Contoh
|
1 2 3 4 5 6 |
<div id = "component_test"> <testcomponent></testcomponent> </div> <div id = "component_test1"> <testcomponent></testcomponent> </div> |
Dalam komponen yang dibuat dalam file .js, saya telah menambahkan template yang telah saya tetapkan kode HTML. Ini adalah cara mendaftarkan komponen global, yang dapat dijadikan bagian dari setiap vue seperti yang ditunjukkan pada skrip berikut.
|
1 2 3 |
Vue.component('testcomponent',{ template : '<div><h1>Hallo..!!! Mari Kita belajar component VueJs</h1></div>' }); |
Oke cukup mudah bukan, dan berikut ini screenshot dari hasil codingan di atas.
Oke itulah tadi pembahasan saya tentang Apa itu VueJS – Components, semoga bermanfaat.