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

Flutter Tutorial Indonesia | 3 Aplikasi Pertama

Dalam sesi ini kita akan membuat aplikasi sederhana sebagai pembukaan dari beberapa tutorial yang akan disampaikan pada blog ini, sebagai dasar pemahaman pada pembahasan ini kita juga akan belajar mengenai struktur dasar dari project flutter. jika anda masih ragu dengan flutter, silahkan baca ini  https://flutter.dev/docs/resources/technical-overview Oke, sebelum membuat project baru, pastikan flutter sdk sudah siap digunakan, untuk mengaturnya anda bisa melihat pada tutorial sebelumnya. 1.Langkah Pertama : Membuat project baru untuk membuat project baru di terminal cukup ketik : flutter create namaaplikasi setelah project jadi, anda akan melihat beberapa kode yg disediakan sebagai contoh aplikasi sederhana dari flutter. 2. Pembahasan mengenai kode Sekarang anda mungkin penasaran dari mana proses awal aplikasi itu dijalankan. . ? Pada aplikasi flutter, file main.dart yang terletak pada folder lib merupakan file dart yang pertama kali di eksekusi, dan akan langsung me