Pembelajaran Dasar Vue.Js

Pembelajaran Dasar Vue.JS - Dalam beberapa minggu terakhir ada proyek yang mengharuskan saya untuk belajar tentang vue.js. Dari hasil membaca dan menonton video tutorial, saya rasa tidak ada yang salah dengan apa yang sudah saya baca dan praktikkan. Saya menulisnya di sini karena menurut saya proses belajar yang baik selain membaca dan melihat adalah menulis.

Vue.js adalah pustaka Javascript yang digunakan untuk membangun antarmuka situs web interaktif. Untuk membuatnya lebih pendek, saya akan menulis Vue.js saya tulis Vue. Pustaka Vue hanya difokuskan pada lapisan tampilan dan sangat mudah diimplementasikan dan diintegrasikan dengan pustaka lain atau dengan proyek yang sudah ada. Untuk mempelajari Vue setidaknya kita memahami dasar-dasar HTML, CSS dan Javascript.

Instalasi vue.js

Harap dicatat bahwa vue tidak mendukung IE8 dan browser sebelumnya. Ada beberapa cara untuk menginstal vue, tetapi cara termudah adalah melalui CDN karena kita tidak perlu menyimpan file Vue.js di proyek kita. Berikut ini adalah contoh cara mereferensikan vue dari CDN:

Dengan mereferensikan vue dari CDN seperti diatas maka otomatis kita akan mendapatkan versi terbaru dari vue yang sudah ada di CDN.

Data Binding

Sama seperti saat belajar bahasa pemrograman lain, kita mulai dengan menampilkan "Hello World". Di sini saya akan menuliskan cara konvensional dan metode vue. Skenarionya adalah kita membuat elemen input dan pada elemen input itu kita akan menulis "Hello World" dan di bagian bawah akan ada paragraf yang menyatakan nilai elemen input tersebut. Jika kita mengubah nilai elemen masukan, informasi di bagian bawah juga akan berubah. Sesuatu seperti kode ini:

1. Dengan cara konvensional

Jika kita membuka file HTML di browser web, tampilannya seperti ini:

2. Dengan cara vue

Kode ini juga akan menghasilkan tampilan yang kurang lebih sama dengan kode di awal, terdapat input teks dan paragraf yang menyatakan nilai elemen input. Perilakunya ketika elemen masukan mengubah nilainya akan memengaruhi konten paragraf di bawah ini juga. Yang membedakan kedua contoh kode di atas adalah kompleksitas kodenya. Dengan cara konvensional, kita membutuhkan event listener seperti keyup atau keydown sehingga perubahan bisa terjadi secara otomatis tetapi tidak demikian halnya saat menggunakan vue.

Untuk menggunakan vue, pertama kita buat instance vue, contoh kode di atas adalah new Vue ({}).

Langkah selanjutnya adalah menentukan model yang terkait dengan vue, pada contoh kode di atas adalah data yang akan menampilkan semua objek yang ada di dalamnya. Langkah terakhir adalah kita mendefinisikan area kerja vue.

Pada kode di atas saya menggunakan div dengan ID "root" dan pada contoh vue instance ditulis el: '#root'.

Setelah melakukan semua langkah ini, selanjutnya periksa ke browser dan apa yang terjadi? Browser tidak menampilkan apapun yang kita inginkan, itu karena kita belum menghubungkan vue dengan elemen input yang sudah ada. Untuk itu kita perlu menambahkan v-model pada elemen masukan kemudian kita menambahkan nilai <p> dari masukan tersebut adalah: {{message}}. </p> di bawah elemen masukan sebelumnya. Jika kita me-refresh halaman browser, elemen input akan bertuliskan "Hello World" dan nilai p tag adalah "nilai inputnya adalah: Hello World". Jika kita mengubah nilai elemen input, secara otomatis nilai p tag juga akan berubah.

Kesimpulan

1. Buat instance vue.
2. Bind dengan element HTML DOM.
3. Tentukan data atau model untuk vue.
4. Gunakan v-model untuk form input sebagai menampilkan data model.

Penutup

Demikian yang dapat saya sampaikan, semoga dapat bermanfaat dan dapat menjadi referensi pemrograman untuk anda. Pelajari dengan berulang kali dan coba untuk mempraktekkan dengan beberapa input yang berbeda setelah itu lihat hasilnya.

Techo