Hallo sahabat dumenity berjumpa lagi dalam tutorial kursuswebdesign, pada tutorial kali ini kita  akan membahas tentang Apa itu VueJS – Components Part 2, lanjutan dari materi sebelumnya atau artikel saya sebelumnya. Bagi yang belum membacanya silahkan klik link berikut Apa itu VueJS – Components Part 1. Sejauh ini, kita telah melihat komponen dasar dengan opsi dasar. Sekarang, mari tambahkan beberapa opsi lainnya seperti data dan metode . Seperti halnya Vue memiliki data dan metode, komponen juga memiliki hal yang sama. Oleh karena itu, saya akan merubah script yang sebelumnya  yang telah kita buat seperti dibawah ini dengan data dan metode.

Contoh

 

component.js

Dalam file .js di atas, saya telah menambahkan data yang merupakan fungsi, yang mengembalikan objek. Objek memiliki properti nama, yang diberi nilai ‘Ria’. Ini digunakan dalam template berikut.

 

Meskipun memiliki data sebagai fungsi dalam komponen, kita dapat menggunakan propertinya dengan cara yang sama seperti yang kita gunakan dengan instance Vue langsung. Juga, ada dua metode yang ditambahkan, changename dan nama asli. Dalam nama changen, saya mengubah properti nama, dan dalam nama asli saya mengatur ulang kembali ke nama aslinya. Saya juga menambahkan dua aksi pada div, gerakan mouse, dan mouseout.

Berikut tampilan pada  browser.

Apa itu VueJS - Components Part 2

 

Seperti yang terlihat pada browser di atas, ini akan menampilkan nama yang ditetapkan dalam properti data, yang merupakan nama yang sama. saya juga telah menetapkan event gerakan mouse pada div dan juga mouseout. Mari kita lihat apa yang terjadi ketika kita melakukan gerakan mouse dan mouseout.
Geser mouse

Apa itu VueJS - Components Part 2

Pada saat menggerakan  mouse, kita melihat nama komponen pertama diubah menjadi Ben, namun, yang kedua tetap seperti apa adanya. Ini karena komponen data adalah fungsi dan mengembalikan objek. Jadi, ketika diubah di satu tempat, hal yang sama tidak ditimpa dalam kasus lain. Oke itu tadi  pembahasan saya Apa itu VueJS – Components Part 2 semoga bermanfaat.