Tutoral Step-by-step Vuejs Untuk Pemula

Jika kamu sudah belajar dasar javascript, maka selanjutnya adalah belajar framework.

Pada tutorial ini, kita akan belajar tentang Vuejs. Mulai dari mengenal apa itu vuejs, hingga membuat aplikasi sederhana dengan Vuejs.

Baiklah, tanpa banyak basa-basi..

Mari kita mulai!

Apa itu Vuejs?

Vue.js adalah sebuah framework Javascript untuk membuat user interface dan single-page application (SPA).

Vue.js dikenal juga dengan Vue saja dan dieja seperti membaca kata view (/vju:/).1

Pada arsitektur MVC (Model–View–Controller), Vuejs hanya akan mengambil peran pada layer View saja.

Arsitektur MVC dan Vuejs

Sedangkan pada sisi backend, vue nggak perduli mau pakai apa.

PHP, Python, Nodejs… terserah! 😄

Yang penting Vue bisa menerima dan mengirim data, lalu membuat tampilan user interface (UI).

Pada dasarnya, fitur utama Vue lebih fokus pada rendering dan komposisi komponen.

Namun, untuk membuat aplikasi yang lebih kompleks, kita akan membutuhkan routing, state manajemen, template, build-tool, dll.

Lalu pertanyaannya:

Mengapa ada vuejs?

Kan sudah ada framework yang lain seperti Angular dan React?

Untuk menjawab pertanyaan ini, mari kita bahas sejarahnya…

Sejarah Singkat Vuejs

Vue awalnya dibuat oleh Evan You pada tahun 2013.

Evan You sebelumnya bekerja di Google dengan Angularjs. Dia kemudian punya ide untuk membuat sesuatu yang lebih ringan dari Angular.

Dari sanalah ia mulai membuat Vuejs.

Versi pertama (0.6) dirilis pada tanggal 8 desember 2013, selanjutnya berlanjut ke versi 0.7 pada tanggal 24 desember 2013.

Selengkapnya bisa kamu lihat di tabel ini:

Version Release date Title
2.6 2019 Feb 4 Macross
2.5 2017 Oct 13 Level E
2.4 2017 Jul 13 Kill la Kill
2.3 2017 Apr 27 JoJo’s Bizarre Adventure
2.2 2017 Feb 26 Initial D
2.1 2016 Nov 22 Hunter X Hunter
2.0 2016 Sep 30 Ghost in the Shell
1.0 2015 Oct 27 Evangelion
0.12 2015 Jun 12 Dragon Ball
0.11 2014 Nov 7 Cowboy Bebop
0.10 2014 Mar 23 Blade Runner
0.9 2014 Feb 25 Animatrix
0.8 2014 Jan 27 -
0.7 2013 Dec 24 -
0.6 2013 Dec 8 VueJS

Keterangan versi lainnya dapat juga dilihat di Release Notes Vuejs

Saat ini Vuejs dikelola oleh Tim inti yang terdiri dari Envan You dan komunitas.

Ini bisa kamu lihat di: https://vuejs.org/v2/guide/team.html

Jadi:

“Vuejs hadir untuk memberikan alternatif framework yang lebih ringan dibandingkan yang lainnya”

Nah, sekarang bagaimana cara memulai belajar Vuejs?

Pertama, kita harus menyiapkan semua peralatannya. Barulah kita bisa mulai belajar Vuejs.

Apa saja peralatannya?

Peralatan untuk Belajar Vuejs

Ada beberapa peralatan yang harus kamu siapkan untuk mulai belajar Vuejs:

  1. Teks Editor (Rekomendasi: VS Code)
  2. Nodejs dan NPM
  3. Vue CLI
  4. Web Browser

Untuk yang baru pertama belajar, kita akan pakai Teks editor dan web browser saja.

Mengapa?

Karena, kita perlu memahami konsep dasar Vuejs dulu.

Baru setelah itu kita akan menggunakan tools seperti Nodejs dan Vue CLI untuk membuat aplikasi yang kompleks.

Baiklah, kalau sudah siap..

..Mari kita mulai!

Membuat Aplikasi Pertama dengan Vuejs

Silahkan buka Teks editor, lalu buatlah file baru bernama hello.html.

Kemudian isi dengan kode berikut:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Aplikasi Vue #1</title>

    <!-- Menyisipkan Vuejs dari CDN -->
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>

    <!-- elemen kontainer untuk aplikasi -->
    <div id="app">
        {{ message }}
    </div>
    
    <!-- aplikasi Vue Hello -->
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                message: "Hello World!"
            }
        })
    </script>
</body>
</html>

Setelah itu, coba buka hello.html dengan web browser.

Maka hasilnya:

Hello World Vuejs

Selamat 🎉 kamu sudah membuat aplikasi pertama dengan Vuejs.

Berikutnya, saya akan coba jelaskan maksud dari kode di atas.

Memahami Struktur Dasar kode Vuejs

Setiap kita akan menggunakan Vuejs, kita harus mengimpor atau menyisipkannya ke dalam kode HTML.

Pada contoh di atas, kita menggunakan Vuejs yang dari CDN dengan kode ini:

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

Kemudian setelah itu, kita membutuhkan elemen kontainer yang akan digunakan oleh Vue untuk menampilkan data.

Pada contoh di atas, kita menggunakan elemen <div> dengan id="app".

<!-- elemen kontainer untuk aplikasi -->
<div id="app">
    {{ message }}
</div>

Terakhir, kita harus membuat objek app dari class Vue() dan menentukan elemen serta data yang akan ditampilkan.

<script>
    var app = new Vue({
        el: "#app",
        data: {
            message: "Hello World!"
        }
    })
</script>

Atribut el berfungsi untuk memilih elemen, pada contoh di atas kita akan memilih elemen dengan id="app".

Lalu atribut data berfungsi untuk menyimpan variabel yang berisi data.

Data ini bisa juga nanti kita dapatkan dari server maupun local storage.

Struktur kode Vuejs

Pada Vuejs, kita menggunakan tanda kurung {{ ... }} untuk menampilkan isi variabel.

Oh iya, ini bersifat reaktif.

Artinya:

Jika isi variabel berubah.. maka Vue akan melakukan render ulang.

Mari kita coba buktikan.

Silahkan buka Inspect Element, kemudian pilih Console.

Setelah itu, ubah isi variabel message, menjadi apapun yang kamu mau.

Contoh:

app.message = "Hi Petani Kode";

Maka hasilnya:

Mengubah isi data

Lihat! benar ‘kan?

Data Binding di Vue

Binding secara bahasa artinya mengikat.

Arti Binding Google Translate

Jadi Data Binding = Mengikat Data.

Kok data diikat?

Memangnya bisa lepas ya?

Hehe 😄, bukan itu maksudnya..

Data binding di Vue adalah cara vue untuk menyambungkan data yang ada di kode Javascript dengan HTML.

Data Binding di Vuejs

Nah, di Vuejs ada dua macam data binding:

  1. One Way Binding (Satu arah)
  2. Two Way Binding (Dua arah)

Binding satu arah artinya, binding yang dilakukan hanya dalam satu arah saja (dari Javascript ke HTML).

Contoh:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Aplikasi Vue #2: One Way Binding</title>

    <!-- Menyisipkan Vuejs dari CDN -->
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>

    <!-- elemen kontainer untuk aplikasi -->
    <div id="app">
        <input type="text" v-bind:value="message">
        <p>{{ message }}</p>
    </div>
    
    <!-- aplikasi Vue Hello -->
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                message: "Hello World!"
            }
        })
    </script>
</body>
</html>

Hasilnya:

Contoh One Way Binding

Inilah yang disebut binding satu arah, meskipun kita mengubah nilai message dari input field, data yang ada di kode Javascript-nya tidak akan ikut berubah.

Coba perhatikan kode aplikasinya, di sana kita menggunakan v-bind: pada atribut value untuk mengambil data dari message.

<div id="app">
    <input type="text" v-bind:value="message">
    <p>{{ message }}</p>
</div>

Mengapa tidak pakai {{ ... }}?

Seperti ini:

<div id="app">
    <input type="text" value="{{ message }}">
    <p>{{ message }}</p>
</div>

Dulunya kita bisa pakai ini pada vue versi lama, tapi untuk vue versi terbaru.. ini tidak bisa berlaku lagi. Kita disarankan menggunakan direktif v-bind.

Nah sudah paham kan yang binding satu arah?

Berikutnya kita akan coba binding dua arah, silahkan buat kode aplikasinya seperti ini:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Aplikasi Vue #2: One Way Binding</title>

    <!-- Menyisipkan Vuejs dari CDN -->
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>

    <!-- elemen kontainer untuk aplikasi -->
    <div id="app">
        <input type="text" v-model:value="message">
        <p>{{ message }}</p>
    </div>
    
    <!-- aplikasi Vue Hello -->
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                message: "Hello World!"
            }
        })
    </script>
</body>
</html>

Hasilnya:

Contoh Two Way Binding

Saat kita mengubah nilai dari input field, maka nilai yang ada di kode javascript-nya juga akan berubah.

Inilah yang disebut two way binding.

Sebenarnya kita hanya menggunakan direktif v-model untuk melakukan binding dua arah.

Penjelasan tentang direktif, akan kita bahas di tutorial berikutnya.

Apa selanjutnya?

Pada tutorial ini, kita sudah mengenal apa itu Vue dan juga belajar cara membuat aplikasi dengan Vue.

Yang perlu diingat adalah:

  • Saat kamu membuat aplikasi dengan Vue, maka wajib hukumnya membuat vue instance atau objek app.
  • Vuejs bersifat reaktif, saat datanya berubah maka elemennya akan di-render ulang
  • Binding data di Vue ada dua cara, yakni satu arah dan dua arah
  • Binding data di Vue dilakukan dengan menggunakan direktif.

Karena itu, selanjutnya silahkan pelajari tentang:

💁‍♀️ P.S: Mau belajar lebih dalam lagi? Ebook Vuejs bisa kamu beli di sini.


  1. https://en.wikipedia.org/wiki/Vue.js ↩︎