Membahas Data-Driven App pada Vue Instance

Pada bagian sebelumnya, kita telah membahas bagaimana cara menggunakan Reactivity pada Vue. Pada bagian ini, kita akan menghabiskan sedikit waktu untuk membahas tentang cara kerjanya khususnya bagian terpenting dari pembuatan Aplikasi dengan Vue.

Data pada Vue dianggap sebagai Reactive selama kita dapat mengubah data tersebut secara langsung. Untuk setiap pasang nilai yang telah kita deklarasikan pada property data, Vue Library akan membuat Getter dan Setter yang berkaitan dengan property tersebut.

Setter dan Getter tersebut dapat bekerja dibawah property data dan dapat membuat Template akan di render ulang ketika terdapat perubahan.

Catatan: Untuk melihat penjelasan lebih rinci tentang Data Reactivity, kalian dapat membaca dokumentasi Official tentang Reactivity pada Vue.

Bagi kalian yang pernah mempelajari React, mungkin kalian akan melihat State Reactive (Misalnya, data) yang sangat berbeda untuk meng-handle Data. Reactive State adalah salah satu yang membuat Vue menjadi berbeda dan unik. Manajemen State (Misalnya, data) terkadang mudah untuk dipahami karena dapat mengubah tampilan secara langsung.


Data Driven App pada Vue

Sifat Reactive dari Data pada Vue dapat memungkinkan kita dalam membuat aplikasi dengan menggunakan Data-Driven. Untuk memahaminya dengan mudah, mari kita lihat contoh aplikasi yang telah kita buat sebelumnya.

Lihat Live Demo

Sekarang, mari kita asumsikan jika kita ingin membuat aplikasi dan menunjukkan kemampuannya seperti:
  • Menampilkan tanggal dan waktu terkini.
  • Melakukan Toggling (Toggle State) informasi pengguna dan kota dari daftar pilihan.
  • Melakukan Toggling (Toggle State) untuk mengubah warna Background dengan mengklik tombol.
  • dll.

Dengan kemampuan diatas, kita dapat mengadaptasikan sifat Reactive dari Vue dan menggunakan properti data baru seperti tanggal yang memiliki nilai tanggal terbaru new Date() atau kota yang dapat menjadi array dan terdiri dari sekumpulan nama kota seperti ['Lampung, 'Jakarta', 'DLL'].

Mustache Syntax dan Directive tertentu (yang akan kita pelajari pada bagian selanjutnya) dapat membantu kita dalam mem-Binding semua informasi tersebut kedalam Template. Dengan bantuan dari Method dan kemampuan Inline, kita dapat mengikat perubahan kedalam Instance data yang mana dapat memperbarui Template ke dalam situasi yang ingin ditampilkan. Itulah sedikit penjelasan Data-Driven tentang bagaimana kita dapat membuat User Interface (UI).

Catatan: Jika kalian pernah menggunakan React, Angular, atau Front-End Framework/Library Modern lainnya, mungkin kalian dapat menggunakan Pattern yang sama seperti memodifikasi data pada aplikasi.

Lebih jelasnya, mari kita buat ulang fungsionalitas dari aplikasi yang telah kita buat pada bagian sebelumnya (Toggle pesan Halo Semuanya! dengan mengklik tombol) dengan menggunakan Vanilla JavaScript (Standar). Terdapat beberapa cara untuk melakukannya. Tetapi, sebagai contoh, kita akan menggunakan cara berikut:
./index.html

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="./styles.css" />
    <title>Tutorial Vue | EL Creative Academy</title>
</head>
<body>
    <div id="aplikasi">
        <h2>Halo Semuanya!</h2>
        <p>Salam dari Yasya El Hakim yang merupakan Author di EL Creative Academy.</p>
        <button onclick="ubahSalam()">Ubah Salam</button>
    </div>
    <script src="./main.js"></script>
</body>
</html>


./main.js

// Implementasi dengan menggunakan Vanilla JavaScript

let pesanSalam = document.getElementsByTagName("h2")[0];

ubahSalam = () => {
    if (pesanSalam.textContent === "Halo Semuanya!") {
        pesanSalam.textContent = "Halo Gaes!";
    } else {
        pesanSalam.textContent = "Halo Semuanya!";
    }
}


Lihat kode di Github | Lihat Live Demo

Hasil dan fungsionalitas dari kode diatas sangatlah sama dengan fungsi dari aplikasi yang telah kita buat sebelumnya yaitu:
  • Mengecek jika teks yang ada di elemen <h2> adalah Halo Semuanya!
  • Jika teks yang ada di elemen <h2> adalah Halo Semuanya! - Maka akan diubah menjadi Halo Gaes!
  • Jika teks yang ada di elemen <h2> bukanlah Halo Semuanya! - Maka akan diubah  kembali menjadi Halo Semuanya!

Perbedaan dari fungsi diatas dengan yang sebelumnya adalah bagaimana kita dapat mengakses dan mengubah teks yang ada di dalam elemen <h2>. Dengan menggunakan Vanilla JavaScript, DOM diperlakukan sebagai satu-satunya Source atau sumber yang dipercaya. Untuk menentukan isi teks dari elemen <h2>, kita harus melihat DOM terlebih dahulu, kemudian mencari elemen, dan melihat nilai dari textContent. Hal tersebut dapat terjadi karena DOM adalah satu-satunya tempat yang memiliki informasi tersebut.

Dengan menggunakan contoh aplikasi Vue yang telah kita buat, kita hanya menerima dan mengubah nilai dari properti data menjadi dapat digunakan pada template (salam), tanpa harus melihat DOM terlebih dahulu. Inilah mengapa Sumber yang dipercaya pada aplikasi Vue adalah properti data dari Vue Instance. Pada aplikasi Vue, kita hampir tidak pernah menggunakan selector seperti document.getElementsByTagName atau document.querySelector('img').setAttribute() melainkan menggunakan properti data dari Instance untuk membuat perubahan pada UI.

Properti Data pada Vue

Vue dapat menginisialisasi Reactivity dari Instance atas Instantiation dan untuk mendapatkan hasilnya, kita harus mendeklarasikan properti terlebih dahulu sebelum menggunakannya. Maka dari itu, kita tidak akan bisa langsung menambahkan (atau menghapus) properti dari Instance yang telah dibuat sebelumnya. Sebagai contoh, kode berikut tidak akan bekerja:

new Vue({
    el: '#aplikasi',
    data: {
        author: 'Yasya El Hakim',
        kota: 'Lampung'
    },
    methods: {
        tambahSalam() {
            // salam belum di inisialisasikan
            this.salam = 'Halo Semuanya!';
        }
    }
});


Pada contoh kode diatas, mungkin Vue akan menampilkan pesan Console Warning. Maka dari itu, kita harus menginisialisaikan semua properti yang kita inginkan terlebih dahulu. Contoh:

new Vue({
    el: '#aplikasi',
    data: {
        salam: '', // salam telah di inisialisasikan
        author: 'Yasya El Hakim',
        kota: 'Lampung'
    },
    methods: {
        tambahSalam() {
            // sekarang, salam dapat diperbarui
            this.salam = 'Halo Semuanya!';
        }
    }
});


Informasi lebih lanjut tentang Reactivity pada Vue dan cara mendeklarasikan Reactive dapat dilihat pada dokumentasi Official Vue.

Mungkin cukup disini dulu pembahasan kita kali ini. Pada bagian selanjutnya, mungkin kita akan belajar dan membahas beberapa Directive Vue. Semoga artikel ini bermanfaat, terimakasih.

0 Komentar