Apa itu VueJS – Components Part 2

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

<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>

component.js

Vue.component('testcomponent',{
   template : '<div v-on:mouseover = "changename()" v-on:mouseout = "originalname();"><h1>Custom Component created by <span id = "name">{{name}}</span></h1></div>',
   data: function() {
      return {
         name : "Ria"
      }
   },
   methods:{
      changename : function() {
         this.name = "Ben";
      },
      originalname: function() {
         this.name = "Ria";
      }
   }
});
var vm = new Vue({
   el: '#component_test'
});
var vm1 = new Vue({
   el: '#component_test1'
});

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.

template: '<div v-on: mouseover = "changename ()" v-on: mouseout = "nama asli ();"> <h1> Komponen Kustom dibuat oleh <span id = "name"> {{name}} < / span> </ h1> </ div> ',

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.

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

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.