Pengenalan Dasar Vuejs untuk Pemula

Pengenalan dasar vuejs untuk pemula dibutuhkan jika Anda ingin membangun sebuah aplikasi berbasis web. Jika Anda ingin tampilan website yang interactive dan user friendly, maka Anda membutuhkan framework.

Vuejs sendiri merupakan salah satu framework milik JavaScript yang populer dalam membangun interface website yang menarik dan interaktif. Untuk lebih memahami apa itu vuejs, silahkan Anda simak ulasan lengkapnya berikut ini.

Pengenalan Dasar Vuejs untuk Pemula

Vuejs merupakan progressive framework yang berasal dari JavaScript bersifat open source. Vuejs ini dikembangkan oleh Evan You pada tahun 2013 lalu. Vuejs ini digunakan untuk membuat user interface pada website. Tujuannya adalah agar website terlihat lebih interaktif.

Selain itu, framework ini juga dimanfaatkan untuk pembuatan vue. Nah, pengenalan dasar vuejs untuk pemula ini hanya difokuskan untuk tampilan layarnya saja. Dimana framework ini sangatlah mudah untuk diimplementasikan dan diintegrasikan dengan library lainnya yang sudah ada sebelumnya.

Berbeda dengan framework monolitik yang lainnya, vue ini dirancang dari dasar ke atas agar bisa diadopsi secara bertahap.

Keunggulan dari Vuejs

Vuejs ini memiliki banyak sekali keunggulan yang tentunya sangat bermanfaat bagi Anda yang ingin membuat tampilan website lebih interactive dan user friendly. Berikut ini akan disebutkan apa saja keunggulan dari vuejs yang perlu Anda ketahui.

• Dapat menyelesaikan berbagai masalah sekaligus memperkenalkan praktik JavaScript moden tanpa kesulitan yang berlebihan.
• Memiliki ukuran yang cukup ringan jika dibandingkan dengan framework lainnya, yakni sekitar 18 hingga 21 kb. Dengan begitu, maka proses pengunduhan ini pun tidak perlu membutuhkan waktu yang lama. Semakin kecil ukurannya, maka akan semakin banyak pula yang akan menggunakannya.
• Pembuatan prototipe pun menjadi lebih cepat. Hal ini dikarenakan vue merupakan framework yang ringan dengan fungsionalitas yang jauh lebih berat. Framework dari vuejs ini sangatlah ringan dan mudah untuk digunakan, sehingga penyelesaian prototipenya pun tidak perlu lagi memakan waktu yang lama.
• Vuejs ini bisa digunakan untuk berinteraksi dua arah. Framework yang satu ini menggunakan konsep arsitektur model view model yang bisa berkomunikasi dengan bagian prosesnya.
• Vuejs ini memiliki banyak sekali dokumentasi dan tutorial yang bisa digunakan sebagai panduannya. Dokumentasi ini terbilang sangat detail, mulai dari cara melakukan instalasinya, integrasinya, hingga kemungkinan masalah yang akan terjadi dan bagaimana penanganannya.

Vuejs yang Perlu Dipelajari Pemula

Dalam pengembangan pengenalan dasar vuejs untuk pemula front end, modularisasi dari library yang menggunakan framework memang sudah biasa terjadi. Dengan adanya high decoupling pada vuejs, perluasan fungsionalitas ini sangatlah mudah untuk dilakukan.

Anda juga sudah tidak perlu lagi untuk menambah library tambahan, terlebih jika hanya untuk mengatur dan merender komponen visual kecil saja, maka Anda cukup membutuhkan pustaka intinya saja.

Vuejs sendiri tidak memiliki gesekan dengan library lainnya. Dimana pengguna vue bisa menggunakan alat yang dirasa memang paling nyaman ketika digunakan. Sebagai contohnya adalah ketika Anda menulis HTML dan JavaScript, maka Anda bisa menambahkan CSS, JSX atau TypeScript. Vuejs ini juga memiliki baris perintah khusus atau CLI yang bisa digunakan dengan Node JS.

Nah, tools yang satu ini tentunya akan memungkinkan Anda sebagai pengguna untuk memulai proyek dengan menggunakan boilerplate atau template dasar.

Belajar Vuejs

Ada beberapa hal yang perlu Anda pelajari dari pengenalan dasar vuejs untuk pemula sebagai berikut ini.

1.      Persiapan Tools

Ketika Anda belajar pemrograman, maka Anda juga membutuhkan tools vue. Beberapa tools yang perlu Anda persiapkan diantaranya adalah teks editor, NPM, Node Js, browser, dan vue CLI. Teks editor ini disesuaikan dengan style Anda masing-masing, maka Anda bisa menggunakan notepad++, visual studio code maupun sejenisnya.

2.      Latihan Membuat Aplikasi

Latihan dalam pembuatan aplikasi ini bisa menggunakan script code. Namun sebelumnya persiapkan terlebih dahulu teks editor, lalu tinggal copy dan paste kodenya. Jangan lupa juga untuk menyimpan script dalam bentuk .html.

Selanjutnya, Anda bisa membuka file tersebut menggunakan browser Anda. Halaman baru ini pun akan terbuka dan terdapat tulisan “Selamat Datang!”.

3.      Struktur Dasar Vue

Pembahasan struktur dasar vue secara garis besarnya akan terlihat ketika Anda menggunakan vue. Dimana Anda harus melakukan impor atau menyisipkannya ke dalam kode HTML. Seperti contohnya adalah sebagai berikut:

<script src=“https://cdn.jsdelivr.net/npm/vue”>

</script>

Nah, setelah code tersebut Anda tulis, maka tentunya Anda pun akan membutuhkan elemen kontainer lainnya yang digunakan oleh vue agar bisa menampilkan data. Elemen yang digunakan adalah <div> yang dikombinasikan dengan id=“app”. Dengan begitu, mak sourcenya akan menjadi:

<div id=“app”>

{message}}

</div>

Setelah Anda menambahkan elemen tersebut, maka pengenalan dasar vuejs untuk pemula harus membuat objek “app” yang berasal dari class vue().  Hal ini digunakan untuk menentukan elemen dan data yang akan ditampilkan nantinya pada kasus ini Anda bisa menggunakan atribut “el” sebagai kata ganti “elemen”.

Selain itu, ada juga atribut “data” yang bisa Anda gunakan sebagai tempat penyimpanan variabel yang berisi data. Script code yang akan ditampilkan menjadi seperti berikut ini:

<script?

Var app = new Vue ({

El: “#app”,

Data: {

Message: “Selamat Datang!”

}

})

</script>

1. Mengenal Data Binding di Vue

Kata “binding” ini bisa Anda artikan sebagai ikatan data. Nah, yang dimaksud dengan data binding ini adalah teknik Vue yang digunakan untuk mengikat data yang sudah ada di JavaScript dengan HTML. Pada umumnya, data binding ini terbagi menjadi 2 macam, yakni one way binding dan two way binding.

Anda bisa menyimpan code dalam bentuk .html dan membukanya di browser masing-masing. Nah, hasil yang akan Anda temukan adalah sebuah kotak bertuliskan “Selamat Datang!”.

Inilah yang dimaksud dengan binding satu arah. Artinya Anda bisa mengubah value dari “message” input field tersebut. Pada binding ini code yang digunakan adalah v-bind. Dimana v-bind ini terdapat pada atribut value yang digunakan untuk mengambil data “message”.

1. Berkenalan dengan Direktif

Ketika Anda mempelajari vuejs, maka direktif ini sangat wajib untuk Anda pelajari dan pahami. Secara umum, direktif ini artinya adalah petunjuk, perintah atau arahan. Pada umumnya, direktif pada vue ini diawali dengan code “v-“.

Ada beberapa direktif yang perlu Anda ingat, dimana direktif ini terbagi menjadi 4 bagian.

• Direktif data binding.
• Direktif conditional rendering.
• Direktif pengulangan ini digunakan apabila data tersaji dalam bentuk list dan jumlahnya yang banyak. Hanya terdapat satu direktif yang ada pada direktif pengulangan ini, yakni v-for. V- for ini bisa Anda gabungkan dengan fungsi direktif v- if.
• Direktif event hanya terdiri atas v-on yang disingkat menjadi “@“ saja. Direktif event ini berfungsi untuk mengatasi event.

Nah, demikianlah pembahasan mengenai pengenalan dasar vuejs untuk pemula sekaligus contohnya. Semoga penjelasan ini bermanfaat untuk Anda.