Apa itu VueJS â€“ Components Part 3

Hallo sahabat dumenity berjumpa lagi dalam tutorialÂ kursuswebdesign,Â pada tutorial kali ini kitaÂ akan membahas tentangÂ Apa itu VueJS â€“ Components Part 3, lanjutan dari materi sebelumnya atau artikel saya sebelumnya. Bagi yang belum membacanya silahkan klik link berikut Apa itu VueJS â€“ Components Part 2.Â Pada pembahasan ini kita akan belajar dinamis component setalah sebelumnya kita belajar tentang dasar – dasar komponen, data dan method. Pada pembahasan ini kita masih menggunakan file yang sama atau yang saya gunakan sebelumnya.

Komponen Dinamis

Komponen dinamis dibuat menggunakan kata kunci <component> </ component> dan terikat menggunakan properti seperti yang ditunjukkan pada contoh berikut.
Contoh, silahkan teman – teman rubah file yang sebelumnya seperti di bawah ini;

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
<body>
   <div id = "databinding">
      <component v-bind:is = "view"></component>
   </div>
   <script type = "text/javascript">
         var vm = new Vue({
            el: '#databinding',
            data: {
            view: 'component1'
                  },
            components: {
                     'component1': {
                        template: '<div><span style = "font-size:25;color:red;">Dynamic Component</span></div>'
                        }
                }
         });
   </script>
</body>
</html>

<html>

<head>

<title>VueJs Instance</title>

</head>

<body>

</div>

var vm = new Vue({

el: '#databinding',

data: {

view: 'component1'

components: {

'component1': {

template: '<div><span style = "font-size:25;color:red;">Dynamic Component</span></div>'

}

});

</script>

</body>

</html>

Oke kalau sudah silahkan Anda save dan jalankan pada browsernya.

Keluaran

Komponen Dinamis

Komponen dinamis dibuat menggunakan sintaks berikut.

Ini memiliki v-bind: is = “view”, dan tampilan nilai ditugaskan untuk itu. Tampilan didefinisikan dalam contoh Vue sebagai berikut.

var vm = new Vue({
      el: '#databinding',
      data: {
            view: 'component1'
         },
      components: {
               'component1': {
                     template: '<div><span style = "font-size:25;color:red;">Dynamic Component</span></div>'
                }
      }
});