Tutorial Vue.Js Bagian 3 : Membuat Hello World Input Reactive dengan Vue.Js

Setelah sedikit memahami tentang apa itu Vue.JS pada tutorial sebelumnya yang berjudul Tutorial Vue.Js Bagian 1 : Tentang Vue.Js dan mengetahui bagaimana cara menginstal atau memasang vue.js sekarang saatnya mempelajari bagaimana cara vue.js bekerja dengan contoh contoh yang akan saya jelaskan.

Untuk contoh pertama yaitu bagaimana caranya membuat Hello World dengan Vue.Js. Namun sebelum itu saya akan menampilkan screenshoot programnya terlebih dahulu.

Membuat Hello World Input Reactive dengan Vue.Js , fungsi reactive.js pada vue.js

Berikut adalah contoh kode script dan penjelasan yang sudah ditulis didalam kode.

<html>
<head>
 <title></title>
</head>
<body>
<!-- meemanggil id app1 yang sudah dideklarasikan
di  viewmodel -->
<div id="app1"> 
 <input v-model="pesan" placeholder="ini">
 <!-- variable yang berisi nilai, 
 dimana variable ini juga di set di instansi vue -->
 <h2>{{pesan}}</h2>

 <h5>pretag</h5>
 <pre>
  {{ $data | json}} 
  <!--fungsi json untuk 
  mengirim data yang di ubah 
  dan menampilkannya dengan variable $data-->
 </pre>
</div>

<!-- meload vue js yang berada di satu folder-->
<script src="vue.min.js"></script>
<script>
//viewmodel
new Vue({
  el: '#app1', // bind to view
  data: {
   pesan : ''
  }
  
 });

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

Nah, program ini merupakan program yang memebrikan contoh dari fungsi reactive data binding yang dimiliki oleh vue.js . Berikut adalah script code dan penjelasannya.
Berikutnya akan ada contoh yang lebih menarik lagi yang saya akan bahs di halaman selanjutnya :
Tutorial Vue.Js Bagian 4 : Contoh Validasi Input Data dengan V-SHOW, V-IF pada Vue.js

Tutorial Vue.Js Bagian 3 : Membuat Hello World Input Reactive dengan Vue.Js

Share this

Author : zenhuzaini

Related Posts