Kenalan dengan Vue.js sebuah framework JavaScript yang keren

Hallo semuanya pada kesempatan kali ini kita akan kenalan dengan salah satu framework javascript yang lagi hot-hot nya nih yaitu framework vue.js, udah pada tau vue.js ? kalo belum yuk belajar dan kenalan sama-sama, karena seperti pepatah mengatakan tak kenal maka tak sayang hehe, ok cukup basa basinya kita langsung bahas aja si vue.js nya, jadi di artikel kali ini saya akan memperkenalkan fitur-fitur dasar yang ada pada vue.js ini supaya teman-teman ada bayangan tentang vue.js ini.

Apa sih Vue.js itu ?

Vue.js adalah sebuah framework untuk membangun antarmuka web yang interaktif.

Instalasi Vue.js

Untuk instalasi vue.js sendiri ada beberapa alternatif bisa menggunakan nya secara langsung dengan mendownload file vue.js nya , menggunakan CDN, NPM, dan Vue-cli, tapi pada kesempatan kali ini kita akan belajar dengan menggunakan cara yg pertama dengan mendownload filenya secara langsung ke komputer kita, cara inilah cara yg paling mudah untuk digunakan dalam tahap awal belajar vue.js itu sendiri, ok untuk mendownload file vue.js nya anda bisa menuju link berikut https://vuejs.org/v2/guide/installation.html dan pilih yg Direct Script Include kemudian pilih yg development version setelah itu letakan filenya di dalam directory untuk belajar vue.js nya.

Membuat Hello World

Salah satu kelebihan dari Vue.js adalah flexibilitas dimana kita dapat membuat sebuah aplikasi web dengan berbagai cara tergantung pada kebutuhan dan skala dari aplikasi web kita.

Kita akan memulai belajarnya dengan membuat sebuah aplikasi “Hello World!” sederhana. Untuk memulai buatlah sebuah file html dengan code sebagai berikut :

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Belajar vue.js dasar</title>
</head>
<body>
<div id="app">
<p> {{ pesan }} </p>
</div>
<script src="vue.js"></script>
<script>
new Vue({
el:"#app",
data: {
pesan:"Hello World!"
}
});
</script>
</body>
</html>

Jika anda buka di browser maka akan menampilakan teks Hello World!. Itu semua merupakan hal yang kita perlukan untuk mulai membuat sebuah aplikasi Vue.js sederhana dengan memisahkan bagian data atau state dengan bagian view atau presentation nya.

Mengenal Directive pada Vue.js

Salah satu fitur yang dimiliki oleh Vue.js adalah penggunaan directive. Directive sendiri merupakan sebuah fitur yang memungkinkan kita untuk menambahkan sebuah special attribute pada tag HTML dari web app kita. Pada Vue.js sendiri setiap attribute directive yang biasa digunakan memiliki awalan atau prefix v- . 
contoh sederhana directive pada vue.js

<div id="app">
<p v-text="pesan"> </p>
</div>
<script src="vue.js"></script>
<script>
new Vue({
el:"#app",
data:{
pesan:"Hallo saya lagi belajar vue.js"
}
});
</script>

Pada contoh code di atas terdapat sebuah tag <p> yang memiliki attribute v-text . Dimana kita lihat bahwa tag <p> tersebut tidak memiliki isi content, akan tetapi karena memiliki attribute v-text yang value nya merujuk ke state message , maka secara otomatis Vue.js akan melakukan manipulasi DOM dengan menambahkan isi content pada tag <p> tersebut sesuai dengan value dari state message di script vue js nya. Untuk passing sebuah value ke content dari sebuah element html kita juga dapat melakukan nya dengan menggunakan script double curly braces {{ }}

Conditional Rendering.

Untuk melakukan conditional rendering pada vue.js kita menggunakan attribute directive v-if . Dimana tag atau element HTML yang memiliki attribute ini akan ditampilkan bedasarkan kondisi value pada state. Attribute ini dapat dikombinasikan dengan attribute v-else-if dan juga v-else.

<div id="app">
  <h1 v-if="nilai >= 80 && nilai <= 100"> Nilai A bro !</h1>
<h1 v-else-if="nilai >=70 && nilai <= 79 "> Nilai B bro ! </h1>
<h1 v-else> Nilai C bro ! </h1>

</div>
<script src="vue.js"></script>
<script>
new Vue({
el:"#app",
data: {
nilai:73
}
});
</script>

Pada script diatas akan menampilkan output Nilai B bro! dikarenakan nilai pada state adalah 73 yg mana memenuhi kondisi kedua.

List Rendering

Attribute directive ini digunakan untuk melakukan list rendering dari list berdasarkan data yang ada. v-for membutuhkan syntax khusus yang berbentuk item in items, dimana items adalah sumber data array dan item adalah alias untuk setiap element dari array yang di iterasi. 
Contoh penggunaannya sebagai berikut :

<div id="app">
<ul>
<li v-for="biodata in namaSiswa">
{{ biodata.nama }}
</li>
</ul>
</div>
<script src="vue.js"></script>
<script>
new Vue({
el:"#app",
data: {
namaSiswa: [
{nama: "Fulana bin fulan"},
{nama: "Melki Peki"},
{nama: "Fasha Aprian"}
]
}
});
</script>

Pada script diatas akan menampikan semua data yang ada pada array namaSiswa.

Form Input Bindings

Untuk melakukan input bindings kita menggunakan v-model yang berfungsi untuk melakukan two-way data binding yang umumnya dilakukan pada form input. yang mana value pada input yang memiliki attribute directive v-model akan merujuk pada state yang menjadi rujukanya dan juga setiap kali terjadi perubahan value pada form input tersebut, value dari state juga akan turut berubah.

<div id="app">
<input type="text" v-model="message"> <br/>
{{ message }}
</div>
<script src="vue.js"></script>
<script>
new Vue({
el:"#app",
data: {
message:"Masukan inputan data bro !"
}
});
</script>

Pada script diatas jika anda memasukan inputan pada form input maka otomatis data pada state juga akan berubah sesuai inputan yang anda masukan.

Event Handling

Untuk melakukan event handling pada vue.js kita bisa menggunakan attribute directive v-on. Attribute v-on akan untuk mengeksekusi atau menjalankan sebuah methods dari instance Vue yang diterima sebagai value dari directive atrribute ini. kita bisa menentukan jenis event yang akan dihandle seperti click, keyup, submit, dsb.
Contoh penggunaanya seperti berikut:

<div id="app">
<button type="button" v-on:click="showMessage"> Klik ! </button>
</div>
<script src="vue.js"></script>
<script>
new Vue({
el:"#app",
data: {
pesan:"Hallo bro, apa kabar ente ?"
},
methods: {
showMessage: function() {
alert(this.pesan)
}
}
});
</script>

Pada script diatas kita menggunakan event onclick dimana jika button diklik akan menampilkan alert yang mengambil value dari state pesan, dimana sebelumnya untuk menampilkan alert tersebut kita buat dulu sebuah methods yang bernama showMessage untuk menampilkan alert nya.

Mengenal Component di Vue.js

Salah satu fitur yang powerful dari Vue.js adalah Component. Component sendiri merupakan sebuah sistem yang memungkinkan kita meningkatkan fungsionalitas dari html. Dengan component kita dapat membungkus beberapa tag HTML menjadi sebuah tag baru yang dapat digunakan berulang-ulang atau reusable pada web yg akan kita bangun.

<div id="app">
<example-component> </example-component>
</div>
<script src="vue.js"></script>
<script>
Vue.component('example-component', {
template: "<p> Hallo saya adalah component <p>"
});
  new Vue({
el:"#app"
});
</script>

Hasil render dari script diatas adalah :

<div id="app">
<p> Hallo saya adalah component <p>
</div>

Kita bisa membuat banyak component yg bisa digunakan berulang-ulang pada bagian yang kita inginkan pada halaman web yang kita buat, tentunya masih banyak hal yg bisa kita lakukan dengan component ini, namun untuk mengenal component ini sudah cukup untuk modal awal belajar dasarnya, dan tentunya bisa dikembangan sendiri lebih lanjut.

Membuat counter sederhana

Dibagian akhir ini kita akan mencoba membuat sebuah counter sederhana.


<div id="app">
{{ title }} <br>
<counter-app> </counter-app>
<counter-app> </counter-app>
</div>
<script src="vue.js"></script>
<script>
Vue.component('counter-app', {
template: '<button type="button" v-on:click="increment"> {{ num }}</button>',
data: function () {
return {
num: 0
}
},
methods: {
increment: function () {
this.num++
}
}
})
new Vue({
el: '#app',
data: {
title: 'Counter App With Vue.js'
}
});
</script>

Jika anda menekan tombol buttonya maka counternya akan otomatis bertambah.

Mungkin cukup itu saja untuk bagian pengenalan fitur-fitur vue.js ini, semoga artikel singkat dan banyak kekurangan ini bisa bermanfaat untuk kita semua dan jangan lupa tekan tombol claps 👏 nya jika anda merasa artikel ini membantu, Sekian dan Terimakasih. ☺

Dokumentasi vue.js
https://vuejs.org/v2/guide/