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

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

Memulai Flask | 2 Belajar REST API Dengan Python Flask

Flask pada dasarnya merupakan hanya sebuah class python yang menyediakan banyak method-method yang berfungsi untuk menangani request-request http pada umumnya, kita bisa membuat service seminimal mungkin tanpa banyak resource yang tidak di perlukan, ini membuat flask sangat cocok untuk pemula yg belum pernah menggunakan framework. Note : Tutorial ini saya tulis dengan sesingkat mungkin, jadi jika anda kebingungan bisa langsung komen di bawah :) Persiapan Semua paket python tersedia di pipy server  termasuk flask, untuk bisa memasang paket-paket tersebut kita perlu menginstall  pip  terlebih dahulu. Pada bawaan sistem operasi linux dan mac biasanya sudah terinstall, namun tidak untuk windows, di windows untuk menginstall pip cukup jalankan file  ini  dengan menggunakan python yang telah di install. Install pip : sudo apt-get install python3-pip PIP ini adalah paket management python yang berfungsi untuk mengelola paket-paket python di komputer kita seperti mendownl