Tutorial Vue.js #2

Pada tutorial kali ini saya akan membuat beberapa contoh program Vue.js yaitu :

A. Membuat penerapan siklus object vue

B. Membuat template vue yang menggabungkan property template, data raw dan data attribute.

C. Membua kalkulator sederhana yang memiliki inputan nilai 1 dan nilai 2, dengan 4 tombol perhitungan (tambah, kurang, kali, bagi). Ketika nilai telah diinput dan tombol di klik akan tampil hasilnya.

Membuat Program

A. Membuat penerapan siklus object vue.

1. Create

- Buat file baru dengan nama create.html
- Isikan dengan kode berikut :

- Kemudian coba jalankan pada browser dan buka console, maka akan tampil seperti berikut :


- yang artinya pada gambar diatas hook created dapat mengakses variable message, dan sebaliknya beforeCreate tidak dapat mengakses variable message.
- walaupun hook created dapat mengakses properti data namun virtual DOM dan template (komponen) nya belum dapat diakses.

2. Mount
- Buat file baru dengan nama mount.html
- Isikan dengan kode berikut :

- Kode diatas akan mencoba mengakses DOM dengan menggunakan fungsi bawaan js, yaitu textContent. textContent ini berfungsi untuk menampilkan konten teks yang ada di dalam el.
- Kemudian coba jalankan pada browser dan buka console, maka akan tampil seperti berikut :


- yang artinya pada gambar diatas kedua hook tersebut dapat mengakses DOM, akan tetapi pada hook beforeMount, datanya belum dirender dengan template, sedangkan hook mounted sudah. Oleh karena itu, hook mounted dapat menampilkan isi dari variabelnya.

3. Update

- Buat file baru dengan nama update.html
- Isikan dengan kode berikut :

-Jika dijalankan pada browser, maka tidak akan tampil apapun di console.

- Hook update terjadi karena adanya manipulasi atau perubahan nilai data pada saat runtime. Untuk mengujinya kita perlu sebuah perintah untuk mengubah variable message.

- Tambahkan satu baris code berikut dibawah objek vue :

  vm.message = 'Hello Vue.js'

- Atau dapat dicoba pada console browser dengan megetikan kode diatas dan tentukan isinya lalu enter.

- Kemudian jalankan lagi pada browser dan buka console.

- Jadi perbedaan nya kalau pada hook beforeUpdate, variabel message nilai nya belum berubah / update sedangkan pada hook updated nilai variabel message telah berubah.

4. Destroy
- Buat file baru dengan nama destroy.html
- Isikan dengan kode berikut :

- Kemudian jalankan pada browser dan buka console nya, maka akan tampil seperti berikut :

B. Membuat template vue yang menggabungkan property template, data raw dan data attribute.
- Buat file baru dengan nama template.html
- Isikan dengan kode berikut :

- Pada kode diatas kita mempunyai template yang berisi tag html h1, yang akan menampilkan teks message, h1 juga mempunyai v-bind:class dengan nama class_h1 yang diambil dari data, variable class_h1 ini mempuyai value text_h1 yang artinya class_h1 sama dengan text_h1 jadi pada tag h1 ini akan memanggil class css .text_h1, dan hasilnya akan di render pada div id=app.
- Apabila dijalankan, akan tampil seperti berikut :

C. Membuat kalkulator sederhana yang memiliki inputan nilai 1 dan nilai 2, dengan 4 tombol perhitungan (tambah, kurang, kali, bagi). Ketika nilai telah diinput dan tombol di klik akan tampil hasilnya.
- Buat file baru dengan nama kalkulator.html
- Isikan dengan kode berikut :

- Pada kode diatas nilai awal variable input1, input2 dan hasil adalah 0, dan ketika salah satu button di klik sebagai contoh button tambah, akan memanggil method tambah(), pada method tambah() akan mengubah variabel hasil dari penjumlahan variabel input1 dengan input2, sebelumnya kita bungkus terlebih dahulu variabel input1 dan input2 dengan parseInt(), parseInt ini untuk mengubah String menjadi Integer.
- Apabila kita jalankan akan tampil seperti berikut :

- Setelah ini kita dapat melakukan perhitungan dengan input dan button nya.
- Contoh kita akan melakukan perhitungan tambah, dan hasil nya seperti berikut :