5 Contoh Aplikasi Sederhana untuk Belajar Vue.js

Vue.js memiliki filosofi dalam pembuatannya, yaitu untuk membuat API sesederhana mungkin untuk membuat two-way data binding yang realtime antara View (HTML) dan model (Object Javascript). Seperti yang akan kita lihat dalam contoh-contoh aplikasi Vue.js dibawah ini, Vue.js memang memegang teguh filosofinya tersebut, terbukti, bekerja dengan Vue.js sangat mudah dan menyenangkan.

Memulai

Kita dapat menyertakan file Vue.js ke dalam HTML dengan menggunakan CDN maupun menggunakan Node.js. Untuk lebih lengkapnya kamu bisa membaca Memulai Belajar Vue.js.

Di bawah ini 5 contoh aplikasi sederhana untuk membantumu belajar Vue.js. Ada banyak komentar untuk menjelaskan baris-baris kodenya. Di akhir setiap bagian ada link ke codepen untuk demo nya, dan untuk kamu bereksperimen.

1. Navigation Menu

Pertama kita akan membuat menu navigasi sederhana. Ada beberapa komponen dasar yang dimiliki setiap aplikasi Vue.js, yaitu:

  1. Model, yaitu data aplikasi. Yang dalam Vue.js, model ini adalah sebuah Javascript Object berisi variabel-variabel dan data inisiasinya.
  2. View, atau template HTML. Disini kita mengatur apa yang akan kita tampilkan, menambahkan event listener, mengatur bagaimana kita menggunakan model.
  3. ViewModel, Vue instance yang menyatukan view dan model sehingga mereka bisa saling berkomunikasi.

Yang perlu selalu diingat adalah model dan view akan selalu tersinkronisasi. Perubahan pada model akan merubah view, dan juga sebaliknya. Pada contoh aplikasi Vue.js pertama kita ini ada model active, yang merepresentasikan menu yang mana yang sedang di pilih.

<div id="app">
    <nav class="nav">
        <!-- Menu akan memiliki class is-active bila model active isinya sesuai. -->
        <!-- Untuk mencegah link mengarahkan halaman kita gunakan modifier 'prevent'. -->
        <!-- Ketika menu di klik, method setActive yang telah kita definisikan di Vue
            akan terpanggil dan mengubah nilai dari 'active' -->
        <a
            class="menu"
            href="#"
            v-bind:class="{'is-active': active === 'home'}"
            v-on:click.prevent="setActive('home')"
        >Home</a>
        <a
            class="menu"
            href="#"
            v-bind:class="{'is-active': active === 'portfolio'}"
            v-on:click.prevent="setActive('portfolio')"
        >Portfolio</a>
        <a
            class="menu"
            href="#"
            v-bind:class="{'is-active': active === 'shop'}"
            v-on:click.prevent="setActive('shop')"
        >Shop</a>
        <a
            class="menu"
            href="#"
            v-bind:class="{'is-active': active === 'about'}"
            v-on:click.prevent="setActive('about')"
        >About</a>
        <a
            class="menu"
            href="#"
            v-bind:class="{'is-active': active === 'contact'}"
            v-on:click.prevent="setActive('contact')"
        >Contact</a>
    </nav>

    <div class="info">
    <!-- Tanda kurung kurawal ganda (atau 'mustache') akan diganti oleh
        isi dari 'active'. Akan otomatis berubah bila ada perubahan model 'active' -->
    Anda memilih <span class="selected">{{ active }}</span>
    </div>
</div>

// Buat instance Vue.js baru.
var App = new Vue({

    // DOM element untuk memuat view model.
    el: '#app',

    // Ini adalah model.
    // Definisikan properti lalu beri nilai awal.
    data: function () {
        return {
            active: 'home',
        };
    },

    // Fungsi-fungsi yang akan kita gunakan.
    methods: {
        setActive: function (menu) {
            this.active = menu;
        },
    },
});

Seperti yang dapat kita lihat Vue.js memiliki sintaks yang sederhana dan mudah diingat:

  • Javascript Object sederhana untuk semua opsi dan data
  • {{Kurung kurawal ganda}} untuk templating
  • v-something atribut untuk menambahkan fungsionalitas secara langsung di HTML

2. Inline Editor

Di contoh aplikasi Vue.js sebelumnya di dalam model kita mendefinisikan sendiri beberapa nilai. Jika kita mau membuat user bisa merubah data, kita bisa menggunakan two-way data binding untuk menghubungkan antara model dengan elemen input html. Ketika user mengetik di dalam elemen input, isi dari elemen input akan otomatis tersimpan di model textContent, yang kemudian akan membuat view juga ikut terupdate.

<!-- v-cloak menyembunyikan data binding yang belum di compile sampai instance Vue siap -->
<!-- Ketika elemen di klik, method hideTooltip akan dipanggil -->
<div id="app" v-cloak v-on:click="hideTooltip">

    <!-- Ini tooltipnya.
         v-on:click.stop adalah event handler untuk klik, dengan modifier untuk menghentikan event propagation.
         v-if memastikan tooltip hanya muncul ketika variabel "showTooltip" nya bernilai benara -->
    <div class="tooltip" v-on:click.stop v-if="showTooltip">

        <!-- v-model menghubungkan (bind) isi dari elemen input dengan model     textContent.
             Perubahan pada elemen input akan otomatis mengubah value model textContent
             dan juga seluruh binding lainnya -->
        <input type="text" v-model="textContent">
    </div>

    <!-- Tanda mustache berikut akan digantikan dengan isi textContent.
         Dan akan secara otomatis berubah ketika model berubah. -->
    <p v-on:click.stop="toggleTooltip">{{textContent}}</p>
</div>

// Buat instance vue yang baru
var App = new Vue({

    // DOM element untuk view model
    el: '#app',

    // Definisikan properti dan beri nilai awal
    data: function () {
        return {
            showTooltip: false,
            textContent: 'Edit me',
        };
    },

    // Fungsi-fungsi yang akan kita pakai
    methods: {
        hideTooltip: function () {
            // Ketika model berubah, view akan otomatis ikut berubah
            this.showTooltip = false;
        },
        toggleTooltip: function () {
            this.showTooltip = !this.showTooltip;
        },
    },
});

Hal lain yang perlu diperhatikan di kode di atas adalah v-if. Yang menampilkan atau menyembunyikan elemen tergantung nilai dari variabel yang diberikan. Anda bisa membaca selengkapnya tentan v-if di sini.

3. Order Form

Contoh aplikasi Vue.js berikut menampilkan menu makanan beserta total harganya. Karena produk-produk disimpan di dalam array, kita bisa menggunakan directive v-for yang akan mengiterasi sebanyak array tersebut dan menampilkannya. Jika ada produk baru yang di masukkan ke dalam array atau data lama berubah, Vue.js akan secacra otomatis meng-update dan menampilkan data yang baru.

<form id="app" v-cloak>
    <h1>Pesanan</h1>
    <ul>
        <!-- Loop array products, beri handle klik, dan set atau hilangkan kelas is-active jika dibutuhkan -->
        <li v-for="product in products" v-on:click="toggleActive(product)" v-bind:class="{ 'is-active': product.active }">
            <!-- Tampilkan nama dan harga barang. -->
            <!-- Gunakan currency filter yang telah kita definisikan. -->
            {{ product.name }}
            <span>{{ product.price | currency }}</span>
        </li>
    </ul>

    <div class="total">
        Total:
        <!-- Kalkulasi harga total. Lagi-lagi kita gunakan filter currency disini. -->
        <span>{{ total() | currency }}</span>
    </div>
</form>

// Definisikan filter dengan nama "currency"
Vue.filter('currency', function (value) {
    return 'Rp' + value.toFixed(2);
});

var App = new Vue({
    el: '#app',
    data: function () {
        return {
            // Definisikan model. View akan iterasi sebanyak model membuat elemen li untuk setiap produk.
            products: [{
                    name: 'Cappucino',
                    price: 35000,
                    active: true,
                }, {
                    name: 'Green Tea Latte',
                    price: 40000,
                    active: true
                },
                {
                    name: 'Fish and Chips',
                    price: 50000,
                    active: true,
                },
                {
                    name: 'Tuna Sandwich',
                    price: 45000,
                    active: true,
                },
                {
                    name: 'Mineral Water',
                    price: 8000,
                    active: false,
                },
                {
                    name: 'Frence Fries',
                    price: 18000,
                    active: false,
                },
            ]
        };
    },
    methods: {
        toggleActive: function (product) {
            product.active = !product.active;
        },
        total: function () {
            var total = 0;
            this.products.forEach(function (product) {
                if (product.active) {
                    total += product.price;
                }
            });

            return total;
        }
    },
});

Kita menggunakan filter untuk dapat menampilkan harga produk dalam format yang sesuai. Filter berguna untuk merubah model untuk ditampilkan di view, tanpa merubah data model aslinya.

4. Instant Search

Contoh aplikasi Vue.js selanjutnya adalah tentang pencarian. Aplikasi berupa listing produk-produk dengan elemen input untuk pencarian yang kemudian akan mem-filter produk sesuai dengan keyword yang di-inputkan. Semua produk akan dimasukkan kedalam products array dan hasil dari pencarian akan ada di dalam filteredProducts yang merupakan computed property.

<form id="app" v-cloak>
    <div class="search">

        <!-- Buat binding antara elemen input dengan model searchTerms -->
        <input type="text" v-model="searchTerms" placeholder="Masukkan kata kunci pencarian">
    </div>

    <ul>

        <!-- Tampilkan sebuah li elemen untuk setiap product di dalam filteredProducts -->
        <li v-for="product in filteredProducts">
            <a href="javascript:void()">
                <img :src="product.image" />
            </a>
            <p>{{ product.name }}</p>
        </li>
    </ul>
</form>

var App = new Vue({
    el: '#app',
    data: function () {
        return {
            searchTerms: '',
            products: [{
                    name: 'Cappucino',
                    active: true,
                }, {
                    name: 'Green Tea Latte',
                    active: true
                },
                {
                    name: 'Fish and Chips',
                    active: true,
                },
                {
                    name: 'Tuna Sandwich',
                    active: true,
                },
                {
                    name: 'Mineral Water',
                    active: false,
                },
                {
                    name: 'French Fries',
                    active: false,
                },
            ]
        };
    },
    computed: {
        // Computed property untuk menyimpan produk-produk yang sesuai dengan searchTermss
        filteredProducts: function () {
            var terms = this.searchTerms.trim().toLowerCase();

            if (!this.searchTerms.length) {
                return this.products;
            }

            return this.products.filter(function (product) {
                if (product.name.toLowerCase().indexOf(terms) !== -1) {
                    return product;
                }
            });
        }
    }
});

Elemen input terhubung (bind) dengan searchTerms model. Ketika teks diinputkan, model secara langsung ter-update dan array filteredProducts akan di buat ulang. Dengan begini kita bia membuat pencarian instan tanpa perlu khawatir dengan render ulang tampilan atau menkonfigurasi event listener.

Switchable Grid

Contoh aplikasi Vue.js sederhana berikutnya mendemonstrasikan bagaimana dengan mudahnya kita dapat berpindah antar mode layout dengan sangat mudah. Dengan menekan tombol, kita dapat berpindah antara mode grid yang menampilkan gambar besar tanpa teks, ke mode list yang menampilkan gambar yang lebih kecil dengan teks.

<form id="app" v-cloak>
    <div class="controls">

        <!-- Dua tombol ini untuk berganti antar layout,
             sehingga hanya elemen ul yang sesuai yang tampil. -->
        <a :class="{ 'active': layout == 'list' }" @click="layout = 'list'">List View</a>
        <a :class="{ 'active': layout == 'grid' }" @click="layout = 'grid'">Grid View</a>
    </div>

    <!-- Dua layout yang kita punya, yang tampil hanya apabila isi dari model layout sesuai. -->
    <ul v-if="layout === 'grid'" class="grid">
        <li v-for="product in products">
            <img :src="product.image.medium" />
        </li>
    </ul>

    <ul v-if="layout === 'list'" class="list">
        <li v-for="product in products">
            <img :src="product.image.small" />
            <p>{{ product.name }}</p>
        </li>
    </ul>
</form>

var App = new Vue({
    el: '#app',
    data: function () {
        return {
            // Mode layout: 'list' dan 'grid'
            layout: 'list',
            products: [{
                    name: 'Cappucino',
                    image: {
                        medium: 'img/cappucino-300x300.jpg',
                        small: 'img/cappucino-150x150.jpg',
                    }
                }, {
                    name: 'Green Tea Latte',
                    image: {
                        medium: 'img/green-tea-latte-300x300.jpg',
                        small: 'img/green-tea-latte-150x150.jpg',
                    }
                },
                {
                    name: 'Fish and Chips',
                    image: {
                        medium: 'img/fish-and-chips-300x300.jpg',
                        small: 'img/fish-and-chips-150x150.jpg',
                    }
                },
                {
                    name: 'Tuna Sandwich',
                    image: {
                        medium: 'img/tuna-sandwich-300x300.jpg',
                        small: 'img/tuna-sandwich-150x150.jpg',
                    }
                },
                {
                    name: 'Mineral Water',
                    image: {
                        medium: 'img/mineral-water-300x300.jpg',
                        small: 'img/mineral-water-150x150.jpg',
                    }
                },
                {
                    name: 'Frence Fries',
                    image: {
                        medium: 'img/french-fries-300x300.jpg',
                        small: 'img/french-fries-150x150.jpg',
                    }
                },
            ]
        };
    },
});

Kesimpulan

Masih banyak lagi yang Vue.js bisa lakukan lebih dari contoh-contoh di atas. Salah satunya seperti animasi dan custom components. Semuanya bisa di lihat di dokumentasi vue official.

Terimakasih sudah membaca.