author Ahmad Muhardian

Tutorial Vuejs: Pengenalan Dasar Vuejs untuk Pemula


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:

VersionRelease dateTitle
2.62019 Feb 4Macross
2.52017 Oct 13Level E
2.42017 Jul 13Kill la Kill
2.32017 Apr 27JoJo’s Bizarre Adventure
2.22017 Feb 26Initial D
2.12016 Nov 22Hunter X Hunter
2.02016 Sep 30Ghost in the Shell
1.02015 Oct 27Evangelion
0.122015 Jun 12Dragon Ball
0.112014 Nov 7Cowboy Bebop
0.102014 Mar 23Blade Runner
0.92014 Feb 25Animatrix
0.82014 Jan 27-
0.72013 Dec 24-
0.62013 Dec 8VueJS

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.

Baca Juga ini

Membuat Fitur Pencarian dengan Vuejs dan Google Custom Search API

Membuat Fitur Pencarian dengan Vuejs dan Google Custom Search API

Googel Custom Search Engine (CSE) adalah sebuah layanan yang memungkinkan kita membuat pencarian kusom melalui API. Pada artikel ini akan dibahas cara menggunakan Vuejs untuk mengakses API CSE.

Membuat AMP Image Generator dengan Vuejs

Membuat AMP Image Generator dengan Vuejs

P.S: Ini adalah artikel lama tentang bagaimana saya membuat AMP Generator untuk digunakan pada Blogger (Blogspot) Hari ini saya baru berkenalan dengan Vue.js. Saya sudah mendengar tentang Vue.js dari beberapa teman dan forum. Tapi, saya belum berani untuk mulai mencobanya. Awalnya saya ingin membuat sebuah alat untuk kebutuhan saya sendiri, yaitu alat yang bisa membuat tag amp-img secara otmatis melalui url gambar. Karena masih banyak artikel di blog ini yang belum disunting dan belum valid AMP.

[Tutorial Instan] Belajar Cepat Bahasa Pemrograman Dart

[Tutorial Instan] Belajar Cepat Bahasa Pemrograman Dart

Pada tutorial ini, kita akan membahas dasar-dasar bahasa pemrograman Dart. Mulai dari tahap instalasi, sampai membuat class...

[Review] Hyper, Terminal Canggih untuk Programmer

[Review] Hyper, Terminal Canggih untuk Programmer

Hyper adalah sebuah terminal emulator yang dibuat dari Electron. Banyak yang bilang: Hyper lebih canggih dari terminal biasa.

4 Cara Menampilkan Output pada Javascript

4 Cara Menampilkan Output pada Javascript

Output adalah sebuah tampilan program yang biasanya digunakan untuk memperlihatkan hasil akhir. Output biasanya ditampilkan dalam bentuk teks.

Memahami Variabel dan Tipe Data dalam Javascript

Memahami Variabel dan Tipe Data dalam Javascript

Variabel adalah sebuah nama yang mewakili sebuah nilai. Variabel bisa diisi dengan berbagai macam nilai seperti string (teks), number (angka), objek, array, dan sebagainya.