kembali lagi!!!
masih dalam pembahasan tentang Vue.js kali ini akan membahas dasar-dasar siklus dari vue.js seperti create, mount, update, dan destroy.
Siklus Vue.Js
Langsung saja buka project sebelumnya, dan buat file baru dengan nama dasar-vue.html dan tambahkan script berikut.
Jalankan filenya di browser, lalu klik kanan inspect element, dan buka tab console, maka akan menampilkan hasil berikut.
Selanjutnya kita akan mencoba pada siklus mount, tambahkan script berikut.
Jalankan kembali di browser maka akan muncul tampilan berikut pada console.
Berikutnya tambahkan siklus update, tambahkan script berikut.
Jika dijalankan pada browser maka tidak akan tampil apapun pada consolenya.
Selanjutnya tambahkan siklus destroy seperti berikut.
Lalu buka pada browser dan cek consolenya.
Menggabungkan Property Template, Data Raw, dan Data Attribute
Kali ini kita akan menggabungkan property template, data raw, dan data attribute. Masih dalam file yang sama, rubahlah kodenya menjadi berikut.
Lalu jalankan code tersebut pada browser, maka tampilannya adalah seperti berikut.
Kalkulator Sederhana
Kali ini kita akan membuat sebuah kalkulator sederhana menggunakan vue.js, pertama kita buat terlebih dahulu tampilan kalkulatornya seperti berikut.
Edit juga sedikit untuk css nya seperti berikut.
Ketika dijalankan pada browser maka tampilannya akan seperti berikut.
Test programnya pada browser, input angka pada kedual kolom inputan, lalu test semua buttonnya. Pertama test button penjumlahan.
button kali
button bagi
cukup sekian untuk tema kali ini
semoga bermanfaat!!!!
No comments:
Post a Comment