Tutorial Vue.Js Bagian 6 : Contoh Komponen Pada Vue.js

Sekarang saya akan memberikan contoh terkait komponen pada vue js mengingat saya sudah menshare artikel tentang Tutorial Vue.Js Bagian 1 : Tentang Vue.Js , mengetahui bagaimana cara menginstal atau memasang vue.js , contoh helo world dengan penerapan reactive data binding, Contoh Validasi Input Data dengan V-SHOW, V-IF pada Vue.js dan contoh event handling pada vue.js . saya pikir ini saatnya untuk memperkenalkan vue component yang lengkap dengan contohnya.

Contoh Runningan programnya

Dan berikut ini adalah source code dan penjelasannya

<!DOCTYPE html>
<html>
<head>
 <title></title>
</head>
<body>
<!-- meemanggil id app1 yang sudah dideklarasikan
di  viewmodel -->
<div id="app">
<!-- template dan atribut yang mengacu pada modelview -->
 <dihitung nama="Likes"></dihitung>
 <dihitung nama="dislikes"></dihitung>
</div>

<template id="dihitung-template">
 <h1>{{nama}}</h1>
 <button @click="count +=1">{{count}}</button>
</template>
 
<script src="vue.js"></script>
<script>
//global component
 Vue.component('dihitung',{
  template: '#dihitung-template',// inibisa di ubah

  props: ['nama'], //akan menjadi atribut pada template
      //di view

  data : function(){ //variable data yang berisi fungsi
   return { count:0}
  }
 });
 //end global component

new Vue({ //vue instance
  el: '#app' // bind to view 
 });

</script>
</body>
</html>

Baiklah, sekarang saya akan menjelaskan tentang computed proprties dimana ini akan lebih sedit susah namun mudah untuk dipahami.

Lanjut ke tutorial selanjutny : Tutorial Vue.Js Bagian 7 : Computed Properties Pada Vue.js dan Contohnya

Tutorial Vue.Js Bagian 6 : Contoh Komponen Pada Vue.js

Share this

Author : zenhuzaini

Related Posts