Dasar - Dasar Vue.js

   Hallo teman-teman bukan ngoding kembali lagi bersama kami dalam tutorial Vue.js, kali ini akan membahas dasar-dasar siklus dari vue.js seperti create, mount, update, dan destroy. langsung aja ke tutorial.
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, buat script berikut.
Jalankan kembali di browser maka akan muncul tampilan berikut pada console.
Berikutnya tambahkan siklus update, buat script berikut.
Jika dijalankan pada browser maka tidak akan tampil apapun pada consolenya.
Untuk mengujinya kita tambahkan satu baris code pada consolenya seperti berikut.
Selanjutnya buat 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.
Selanjutnya buat logika scriptnya nya seperti berikut.
Test programnya pada browser, input angka pada kedual kolom inputan, lalu test semua buttonnya. Pertama test button penjumlahan.
Lalu button pengurangan.
Lalu button perkalian.
Dan yang terakhir button pembagian.
Cukup sekian tutorial kali ini, semoga bermanfaat. dan sampai jumpa di tutorial selanjutnya.

Comments

Post a Comment

Popular posts from this blog

Microservice

Image
    Microservice menjadi salah satu arsitektur yang banyak didiskusikan oleh para developer pada saat ini, Alasannya karena microservice dapat membantu developer dalam membuat aplikasi yang high performance, scalable, reliable dan secure. Jadi apa itu Microservice ?     Microservices berarti membagi aplikasi menjadi layanan yang lebih kecil dan saling terhubung tidak seperti aplikasi monolitik. Monolitik sendiri merupakan sebuah arsitektur dimana dalam pembuatan aplikasi. semua komponen menjadi satu kesatuan, dalam hal ini satu kesatuan berarti menyatukan antara front-end dan backend dalam satu aplikasi yang sama.    Contoh penggunaan microservice ini misal dalam sebuah Aplikasi online shop yang terdiri dari beberapa fitur, ada fitur untuk menampikan produk, menambah ke keranjang, dan pembayaran. Fitur-fitur tersebut dibangun dalam service yang berbeda atau aplikasi yang berbeda dan database yang berbeda pula. Dalam penggunaannya service-service ...
Read more

Directive dan List Vue.js

Image
Directive dan List Vue.js Hallo teman-teman, kali ini kita akan membahas directive dan list pada  vue.js . Masih dalam project yang sama, buatlah sebuah file baru dengan nama  directive.html  dan tuliskan codenya seperti berikut. v-if Sekarang jalankan pada brosernya maka akan muncul tampilan berikut. Sekarang coba ganti data jumlahnya. Lalu jalankan kembali browsernya, maka akan muncul tampilan berikut. Directive ini juga tetap memiliki sifat reactive. Sebagai contoh, jika pada saat runtime, kemudian variable jumlahnya diubah menjadi ’75’ dengan cara menulis perintah  vm.nilai  = ’75’, maka view akan dirender ulang. v-on Kali ini kita akan mencoba event v-on, ada banyak seklai event-event di dalam  vue.js  ini, kali ini kita hanya mencoba event onclick. Masih dalam file yang sama, tambahkan script berikut. Ketika button di klik akan memunculkan alert konfirmasi, silahkan jalankan pada browser dan lihat hasilny...
Read more

Form dan Filtering Vue.js

Image
Form dan Filtering Vue.js Hallo teman-teman, kali ini saya akan membahas mengenai form input menggunakan  vue.js . Form ini nantinya akan menampilkan setiap inputan dan mengirimkan data ke server php. Form Input Pertama kita buat file baru dengan nama  form.html , seperti biasa import terlebih dahulu library vue js nya pada tag script di header. Dalam mendesign form ini kita buat tampilannya agar terlihat lebih menarik dengan menggunakan library bootstrap, agar tidak perlu mendownload terlebih dahulu kita import saja librarynya via link cdn yang bisa di dapat pada dokumentasi bootstrap. Tambahkan pada tag header project kita seperti berikut (dengan catatan harus terkoneksi internet). Pada form input kali ini kita akan mencoba semua tipe inputan seperti text, number, textarea, checkbox, selectbox, radio button, dan file. Design tampilan form nya seperti berikut. Ketika form input di inputkan, maka akan menampilkan setiap teks yang di bungkus di dapal tag ...
Read more