CARA MUDAH MEMBUAT KALKULATOR DENGAN VUE JS

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

A. 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.

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

C. Membuat penerapan siklus object vue

A. 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 :

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 :

Membuat Program

C. Membuat penerapan siklus object vue

- pertama ketikan script dibawah ini :

- penjelasan : 

  a. fungsi  Create  untuk meng create

  b. fungsi mount adalah untuk meng mount : 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.

 c. update untuk mengupdate data

 d. Destroye untuk mendestroy atau meng hapus data

 hasil dari code di atas terlihat tidak terjadi apa - apa tetapi di console terlihat ada sebelum dan sesudah script di eksekusi