VueJS: Mengenal Sedikit tentang Vue

Pada seri Vue ini, kita akan mempelajari semua yang perlu diketahui untuk mulai mempelajari Vue Framework seperti Vue Instance, Component, sampai tahap Testing.

Pada seri yang pertama ini, saya sangat menargetkan semua orang yang tidak atau belum memiliki pengetahuan dasar tentang Vue tetapi harus memiliki sedikit atau beberapa pengalaman tentang JavaScript. Mari kita mulai.


Apa itu Vue?

Vue adalah Open-Source JavaScript Framework yang biasa digunakan untuk membuat User Interface (UI) - yang dibuat dan dikembangkan oleh Evan You. Vue dapat dikatakan sebagai JavaScript Framework yang Progressive, Approachable, Versatile, dan Performant. Sekarang, mari kita bahas masing-masingnya:

Vue: Progressive

Banyak yang mengatakan bahwa Vue bersifat Progressive karena dapat diperkecil dan diperluas. Dengan kata lain, kita dapat menggunakan Vue seperti halnya kita menggunakan jQuery - dengan meletakkan satu Tag script. Contoh:

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


Ketika kita ingin yang lebih luas, Vue juga dapat berkembang dengan memberikan kita Tools yang ada di dalam ekosistemnya untuk membantu kita agar dapat menjadi lebih produktif. Terkadang, Vue dapat disebut sebagai Adoptable Framework karena masing-masing Tools tersebut dapat ditambahkan jika kita memerlukannya.

Vue: Approachable

Vue dapat kita pahami dengan mudah jika kita sudah mengetahui dasar dari HTML, CSS, dan JS. Jika kita sudah menguasai ketiga teknologi tersebut, kita dapat mulai mempelajari Vue untuk membuat aplikasi Web (Web Application) yang lebih kompleks.

Vue: Versatile

Vue Framework telah diakui sebagai Framework yang serbaguna (Versatile) karena Library dari Vue itu sendiri cocok dengan Tools yang ada di ekosistemnya. Tools-tools tersebut antara lain:
  • vue-cli (Vue Command Line Interface) - Dapat kita gunakan untuk melakukan Prototyping dan mengatur aplikasi Vue-Webpack dengan cepat.
  • vue-router - Dapat kita gunakan untuk memahami Client-Side Routing ke dalam aplikasi dengan cara yang relatif mudah.
  • vuex - Merupakan Library (hampir mirip dengan Flux) yang dapat kita gunakan untuk mengelola Data dalam suatu aplikasi.
  • vue-test-utils - Merupakan Testing Utility Library yang dapat kita gunakan untuk membuat pengujian komponen Vue dengan cara yang jauh lebih mudah.

Masing-masing dari Tools di atas saat ini dikelola oleh tim Vue sendiri sehingga dapat membuat pengintegrasian dan penggunaannya menjadi lebih mudah.

Cara Menggunakan Vue

Kita dapat menggunakan Vue dengan cara meletakkan tag script ke dalam file HTML yang berfungsi untuk me-load versi terbaru dari Vue melalui Content Delivery Network (CDN). Kita juga dapat menggunakan file JavaScript (misalnya main.js) yang isinya adalah kode dari Vue. Berikut adalah contoh untuk menggunakannya:

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>Tutorial Vue | EL Creative Academy</title>
</head>
<body>
    <script src="https://unpkg.com/vue"></script>
    <script src="./main.js"></script>
</body>
</html>


Dengan menggunakan Library Vue yang tersedia, kita dapat membuat aplikasi Vue baru. Disini, kita akan belajar membuat aplikasi dengan mendeklarasikan Vue Instance - yang merupakan inti dari aplikasi Vue - tepat pada file main.js. Berikut adalah contoh penulisannya:

new Vue({
    // options
});


Vue Instance dapat menerima Option berupa objek yang dapat berisi rincian Instance seperti Template, Data, Method, dll. Root Level Instance dapat kita gunakan untuk menentukan elemen DOM mana yang ingin dikaitkan. Contoh:

new Vue({
    el: '#aplikasi',
});


Pada kode diatas, kita telah menggunakan Option el untuk menentukan elemen HTML dengan id aplikasi agar dapat menjadi titik pemasangan dari aplikasi Vue.

Tips: Vue adalah User Inteface (UI) Library yang berfokus pada View Layer. Aplikasi Vue harus bergantung pada elemen HTML DOM yang berguna untuk mengontrol fungsi dari elemen itu sendiri.

Vue Instance juga dapat mengembalikan data yang perlu ditangani kedalam View Layer. Data tersebut harus ditentukan melalui Data Options. Sekarang, mari kita deklarasikan Data Property salam yang dapat menampilkan String atau teks "Halo Semuanya!":

new Vue({
    el: '#aplikasi',
    data: {
        salam: 'Halo Semuanya!',
    },
});


Untuk dapat menampilkan nilai yang ada di Data Property salam pada Template yang telah kita buat, pertama-tama kita harus mendeklarasikan elemen yang dapat dikaitkan (Elemen HTML yang memiliki id aplikasi). Contoh:

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>Tutorial Vue | EL Creative Academy</title>
</head>
<body>
    <div id="aplikasi">
        <!-- Lokasi Template kode Vue -->
    </div>
    <script src="https://unpkg.com/vue"></script>
    <script src="./main.js"></script>
</body>
</html>


Sekarang, kita dapat menampilkan nilai dari properti salam pada Vue Instance di dalam Template HTML yang telah kita buat. Untuk menghubungkan (Binding) nilai Data sebagai teks, kita dapat menggunakan Mustache Syntax. Contoh:

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>Tutorial Vue | EL Creative Academy</title>
</head>
<body>
    <div id="aplikasi">
        <h2>{{ salam }}</h2>
    </div>
    <script src="https://unpkg.com/vue"></script>
    <script src="./main.js"></script>
</body>
</html>


Sekarang, Data Property salam pada Template yang telah kita buat akan langsung terhubung kedalam Instance. Ketika kita membuka aplikasi tersebut, kita akan dapat melihat teks "Halo Semuanya!".

Lihat kode di Github | Lihat Live Demo

Sangat mudah bukan? Pada seri selanjutnya, mungkin kita akan belajar tentang Property data dari Vue Instance serta mempelajari cara mengaktifkan reactivity dari aplikasi Vue. Semoga artikel ini bermanfaat, terimakasih telah berkunjung di EL Creative Academy.

0 Komentar