Membuat Biodata Diri Menggunakan Vue.js

Image result for vue.js
image from google

  Hallo sobat bukan ngoding, kali ini kita akan membahas tentang vue.js, yuk langsung di simak aja.

Apa itu Vue.js  ?

Vue.js adalah suatu librari Javascript yang digunakan untuk membangun antar muka sebuah website yang interaktif. Supaya lebih singkat, untuk selanjutnya Vue.js saya tulis Vue. Library dari Vue difokuskan hanya pada view layer dan sangat mudah diimplementasikan dan diintegrasikan dengan library lain ataupun juga dengan project yang sudah ada sebelumnya. Untuk mempelajari Vue ini setidaknya kita sudah mengerti dasar-dasar HTML, CSS dan juga Javascript.


Contoh implementasi Vue.js

Kali ini kita akan mencoba untuk menampilkan data diri, namun dimanipulasi dari vue.js. Pertama kita buat dulu sebuah folder dengan susunan seperti berikut.
Pada file vue.js copykan script dari link berikut https://vuejs.org/js/vue.js.
Lalu tambahkan file dengan nama datadiri.html dan tambahkan scriptnya sebagai berikut.
Jalankan pada browser maka hasilnya akan seperti berikut.

Penjelasan Code

Pertama kita tambahkan terlebih dahulu library dari vue.jsnya pada tag script.
Lalu kita definisikan id nya pada div agar bisa dipanggil pada script vue.js nantinya.
Untuk mendefinisikan vue.js kita gunakan script new Vue({  }), di dalam kurung kurawal tersebut kita tuliskan scriptnya seperti berikut.
Parameter el: untuk mendifinisikan element id, dan data: untuk mendefinisikan data yang akan dimanipulasi.
Uji Reaktifitas
Untuk pengujian apakah data itu dinamis kita bisa klik kanan inspect element, lalu masuk ke tab console, dan ketikkan variable dari definisi vue nya yaitu diri dan ketikkan object yang akan kita test yaitu pada variabel nama, misal seperti berikut.
Ketika kita klik enter, maka data pada browser pun ikut terubah secara realtime.
Kesimpulannya adalah Vue.js ini adalah sebuah library javascript untuk memudahkan para developer dalam menuliskan syntax javascript menjadi lebih singkat.
Cukup sekian pejelasan dari dasar penggunaan vue.js ini, semoga bermanfaat. sampai jumpa di tutorial yang lainnya.


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

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

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