Langsung ke konten utama

Vue Js Tutorial Indonesia | 3 data

Pada vue js ada beberapa bentuk data yang digunakan, kita bisa gunakan variabel biasa seperti yang di deklarasi menggunakan kata kunci const, var dan let. Namun untuk penggunaan suatu data yang akan kita tampilkan pada template kita perlu mengaksesnya dari object data: yang akan kita bahas pada tutorial kali ini.

Tujuan tulisan kali ini :
  • Untuk mengerti object data pada script vue js yang kita buat.
  • Belajar cara menggunakan atribut yang di sediakan oleh vue js.
untuk mempermudah belajar kali ini, saya akan memperlihat sebuah program sederhana di bawah ini :
<div id="app">
  <p>{{ foo }}</p>
  <!-- this will no longer update `foo`! -->
  <button v-on:click="foo = 'baz'">Change it</button>
</div
Saya ulangi dari pembahasan tutorial sebelumnya, "jika kita ingin menggunakan vue js maka kita harus memilih object DOM-nya, nah disini pada baris pertama saya menggunakan object DIV", setelah kita memilih objectnya maka object-object DOM yang ada didalam object yang kita pilih tadi adalah object yang dapat di handle oleh vue js.

Dalam hal ini jika kita ingin menampilkan data yg telah kita tulis didalam blok data pada aplikasi vue js, maka di dalam template kita bisa menempelkannya di dalam kurung kurawal  {{ disini }}  dari contoh di atas saya akan menampilkan data yang bernama foo kemudian jika kita tekan tombol Change It, maka akan mengubah isi dari data foo menjadi baz, namun ini tidak akan ada dalam pembahasan kali ini. :D

Template dan Aplikasi vue js yang saya maksud di dalam tulisan ini adalah
  • Kerangka HTML-nya bisa di sebut template
  • script yang kita tulis di dalam object vue, bisa kita sebut aplikasi vue, untuk lebih jelasnya silahkan baca tutorial sebelumnya.
 contohnya seperti ini
- ini bisa di sebut template
<div id="aplikasi">
    {{ pesan }}
</div>
 - ini  bisa di sebut dengan aplikasi vue js-nya
new Vue({
  el: '#aplikasi',
  data: {
    pesan: 'Hello Vue!'
  }
})

maka dari contoh di atas hasil dari program yang kita buat akan menjadi seperti ini saat di jalankan di browser,
<div id="aplikasi">
    Hello Vue
</div>

ok, itu adalah cara untuk menampilkan data di dalam sebuah template,



Sekarang kita akan menggunakan object DOM yaitu  input  untuk mengubah nilai data pada aplikasi vue secara langsung,

sebelumnya kita telah membuat script vue js-nya seperti ini
new Vue({
  el: '#aplikasi',
  data: {
    pesan: 'Hello Vue!'
  }
})
dan template seperti ini :
<div id="aplikasi">
    {{ pesan }}
</div>
full code dari ini adalah:
<html>
<head>
<title>hello vue</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
<div id="aplikasi">
    {{pesan}}
</div>
</body>

<script>
new Vue({
  el: '#aplikasi',
  data: {
    pesan: 'Hello Vue!'
  }
})</script>
</html>

kita akan menggunakan salah satu object DOM yaitu input untuk mengubah nilai data pesan yang ada di dalam script vue js.

secara biasa kita ketahui object input yang bertype 'text' seperti berikut: 
<input type='text'>
bagaimana kita gunakan object tersebut untuk mengubah nilai yang ada di dalam aplikasi vue kita?

jawabnya mudah, cukup tempelkan atribut yang telah disediakan oleh vue js,  yaitu atribut v-model kemudian didalam atribut v-model pasang data yang akan kita listen perubahannya contohnya adalah pesan, seperti berikut
<input type='text' v-model='pesan'>
di dalam contoh tersebut saya nge-listen data pesan, jadi apapun yang kita inputkan, akan secara langsung mengubah nilai dari data pesan, jadi full code dari aplikasi yang kita buat adalah seperti berikut,

<html>
<head>
<title>hello vue</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
<div id="aplikasi">  {{pesan}}
  <input type='text' v-model='pesan'>
</div>
</body>

<script>
new Vue({
  el: '#aplikasi',
  data: {
    pesan: 'Hello Vue!'
  }
})</script>
</html>

Saya kira ini sudah jelas, jika ada pertanyaan silahkan bertanya :)

Komentar

Postingan populer dari blog ini

Situs Belajar Coding Dapat Sertifikat Untuk Pekerjaan

Situs belajar bahasa pemrograman yang akan saya bagikan pada tulisan kali ini akan adalah situs yang bisa membuat anda mendapatkan pekerjaan dan yang pastinya materi dari situs yang saya pilih ini adalah materi yang berstandar internasional. Kelebihan dari memilih courses online dari pada membaca ebook atau menonton video tutorial di youtube adalah kita akan mendapatkan sertifiat, diamana sertfikat tersebut bisa kita gunakan untuk mendapatkan pekerjaan, dan berita bagus bagi para freelancer yaitu adanya linkedin situs yang mempermudah pertemuan antara pencari pekerjaan dengan perekrut dari suatu perusahaan, disana kita bisa menambahkan sertifikat, pengalaman kerja, keahlian yang kita miliki dan masih banyak lagi, selain itu kita juga bisa print profil kita menjadi sebuah portofolio berbentuk file PDF. Dari pengalaman saya sendiri yaitu selain mendapatkan tawaran pekerjaan saya juga sering di mendapatkan client yang memesan untuk di buatkan suatu aplikasi dan itu sering menjadi

Flutter Tutorial Indonesia | 1 Pendahuluan

Setelah rilisnya bahasa pemrograman Dart yang di kembangkan oleh google pada tahun 2011 kini bahasa tersebut sudah memiliki framework yang bisa digunakan untuk membuat aplikasi moile yaitu untuk android dan ios sekaligus dalam satu waktu. Flutter juga digunakan sebagai framework utama dalam pengembangan aplikasi untuk OS Google Fuchsia. Tentang Flutter : Menggunakan Library Grafik Google Skia untuk mesin rendernya, alias tidak menggunakan bawan dari android atau iOS, dan ini yang membuat tampilan di android, iOS, atau desktop tetap sama. Semua UI adalah Widget Rendering Lebih Cepat Tidak hanya untuk membuat UI Flutter juga untuk menangani aliran data dan status data yang rumit dengan cara yang elegan dengan model Reactive. Dalam acara Google I/O 2018 menyatakan bahwa sekarang sudah menyediakan dokumentasi yang lengkap di flutter.dev dan anda bisa langsung belajar framework ini dari dokumentasi tersebut atau bisa mengambil courses di udacity atau tempat courses lainnya sep

Apa itu API | 1 Belajar REST API Dengan Python Flask

Dalam sesi ini kita akan belajar cara membuat API menggunakan Flask, di perlukan sedikit dasar bahasa pemrograman python untuk mempermudah dalam mempelajari ini, dan jangan kawatir jika anda belum pernah  Belajar Flask  sebelumnya, karena pada tutorial kita akan membahas dari dasar. Flask ini framework yang sangat cocok digunakan untuk membuat suatu service yang kecil, dan ini telah banyak di gunakan oleh perusahaan-perusahaan besar, anda bisa lihat  disini . Di saat saya menulis tutorial ini, pengembangan Flask sudah mencapai seperti berikut: Contributors :503 Commits : 3,5037 Ok, saya akan mulai dengan membahas apa itu API ? API (Application programming interface) - Mudahnya bisa di sebut sebuah service yang berfungsi untuk menghubungkan service antar service, contohnya frontend dan backend agar bisa bertukar data kita butuh yang namanya API Service, jadi kalau istilah lainnya ini bisa di sebut sebuah gerbang penghubung. Secara "garis besar" pekerjaan pr