Vue JS Tutorial: Konsep dan Pengenalan Dasar Untuk Pemula

Setelah sebelumnya kami membahas tentang apa itu Vue JS, pada artikel ini kami akan berbagi informasi seputar tutorial Vue JS serta penjelasan konsep dasarnya untuk pemula.

Sebagai salah satu pemrograman JavaScript yang memanfaatkan Node JS sebagai runtime environment dan fokus pada pengembangan UI yang interaktif, Vue JS menjadi langganan para expertise UI/UX dalam merancang sebuah web aplikasi.

Oleh karena itu, jika Anda masih bertanya-tanya, framework apa saja yang cocok digunakan untuk pengembangan UI? Jawabannya adalah Vue JS. Kami akan membahas secara lengkap konsep dasar dan tutorial Vue JS kepada anda. Berikut informasi selengkapnya.

Pengertian Vue JS

Vue Js adalah framework Javascript yang digunakan untuk membuat aplikasi modern. Dilansir dari laman resminya, Vue.js sering disebut dengan Vue saja. Bila diucapkan seperti berbunyi view atau /vjuː/ .

Pada arsitektur MVC, Vue bekerja di bagian view saja (tampilan). Untuk back end-nya Anda bebas menggunakan apapun yang Anda suka. Misalnya dapat di-deploy dengan NodeJS, PHP, Python, dan masih banyak lagi.

Selain digunakan untuk membangun project website, Vue juga banyak digunakan untuk membangun aplikasi desktop maupun mobile. 

Konsep Dasar Vue JS

Pada tutorial Vue JS yang pertama, kami akan menjelaskan tentang konsep dasarnya terlebih dahulu. Vue JS memposisikan diri sebagai pemrograman yang berfokus pada pengembangan UI dan berjalan dengan NodeJS sebagai runtime-nya. Framework vue js juga mampu diintegrasikan dengan berbagai komponen HTML dengan baik, bahkan CSS dan JSX sekalipun. 

Vue JS memiliki banyak pengguna dari berbagai kalangan, mulai dari para pemula yang baru mulai belajar, hingga kalangan profesional. Beberapa perusahaan besar seperti Google dan Adobe juga menggunakan Vue JS.

Vue JS memiliki baris perintah khusus (command line interface/CLI) yang dibuat di NodeJS. Tool ini memungkinkan Anda, sebagai developer, untuk memulai project menggunakan boilerplate atau template dasar.

Memahami Struktur Dasar Kode Vue JS

Untuk dapat mempelajari Vue JS dengan baik, ada kalanya Anda perlu mengetahui struktur dasar dari Vue itu sendiri. Mengetahui struktur suatu rancangan pemrograman dapat mempermudah Anda dalam melakukan pengembangan Vue sebagai UI (User Interface).

Komponen

Struktur dasar yang biasanya terlihat saat memulai aplikasi dari awal adalah folder komponen, bersama dengan file entri main.js dan komponen App.vue:

src/
        main.js
        App.vue
        components/

Setelah beberapa saat, Anda akan memiliki beberapa komponen. Contoh yang sangat sederhana dari struktur ini, dapat berupa sebagai berikut:

components/
        ArtikelTitle.vue
        ArtikelList.vue
        Tombol.vue
        Footer.vue
        Header.vue
        BagianBawahArtikel.vue
        Daftar.vue
        
pages/
        ArtikelPage.vue
        HalamanUser.vue

Ketika sudah mengetahui struktur dasar komponen di atas, Anda dapat dengan mudah memulai suatu rancangan program, yang dimulai dari komponen utama hingga komponen paling bawah suatu halaman.

Pada contoh sederhana di atas, komponen yang memuat ArtikelPage.vue adalah ArtikelTitle dan ArtikelList.

Kode Vue JS

Seperti yang telah dibahas sebelumnya, bahwa Vue JS dapat berkolaborasi bersamaan dengan kode HTML. Untuk contoh sederhananya dari tag HTML, kemudian Class untuk pemanggilan CSS, seperti berikut:

Hasil dari pengkodean di atas adalah sebagai berikut:

Umumnya, CSS pada Vue dibuat dalam format nama.scss. SCSS atau Sassy CSS adalah sintaks terbaru dari SASS (Syntactically Awesome Style Sheets), yang tersimpan pada directory assets.

Data Binding di Vue JS

Data Binding pada Vue JS adalah sebuah proses yang memanfaatkan virtual DOM sebagai lokasi pemfilteran kode yang akan disematkan dalam baris JavaScript. Proses binding memiliki dua formulasi, yakni binding satu arah dan dua arah. Pada praktiknya, proses dua arah ini mirip dengan Asynchronous.

Pada binding satu arah, perubahan hanya dapat dilakukan melalui back-end secara langsung, atau dikecualikan apabila menggunakan button yang dapat memperbarui data dari front-end.

Hal ini tidak berlaku pada binding dua arah, yang menggunakan directive v-model karena perubahan yang dilakukan pada front-end akan langsung diperbarui dalam browser. Berikut contoh masing-masing scriptnya:

Binding Satu Arah

Berikut tutorial dan script binding satu arah di Vue JS ;

<!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>Binding satu arah</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>

    <div id="app">
        <input type="text" v-bind:value="pesan">
        <p>{{ pesan }}</p>
    </div>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                pesan: "Ujicoba binding satu arah."
            }
        })
    </script>
</body>
</html>


HTML embed: <script src="https://gist.github.com/fredriclesomar/36ea64b3dc7ad2ae89e30376277cb5e2.js"></script>

Hasil:

Binding Dua Arah

Berikut tutorial dan script binding dua arah di Vue JS ;

<!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>Binding dua arah</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>

    <div id="app">
		<input type="checkbox" id="Rumahweb" value="Rumahweb" v-model="centang">
		<label for="Rumahweb">Rumahweb</label>
		<input type="checkbox" id="Indonesia" value="Indonesia" v-model="centang">
		<label for="Indonesia">Indonesia</label><br>
		<span>Nama tercentang: {{ centang }}</span>
	</div>
    <script>
        var app = new Vue({
            el: "#app",
			data: {
                centang: []
		}
	})
    </script>
</body>
</html>

HTML embed: <script src="https://gist.github.com/fredriclesomar/0bb80744680df8dbd5233dfa94513bf8.js"></script>

Hasil:

Link alternative kalau file gif gagal redering di docs → [https://s.id/gifArtikelRW] 

Vue JS Directive

Vue JS memiliki banyak directive yang dapat digunakan. Hal ini dikarenakan library Vue oleh developer diberikan keleluasaan untuk membangun directive sendiri (custom). Berikut Directive pada VueJS:

Directive Data Binding

• v-bind untuk binding data satu arah;
• v-model untuk binding data dua arah;
• v-html untuk menampilkan data HTML;
• v-text untuk menampilkan data dalam plain text;
• v-once untuk menampilkan data satu kali (tidak di-render ulang meskipun data berubah).

Directive Conditional Rendering

• v-if digunakan jika hanya ada satu kondisi;
• v-else digunakan saat memiliki dua kondisi;
• v-else-if digunakan jika memiliki banyak kondisi.

Directive Perulangan 

• v-for digunakan untuk menampilkan banyak data, contohnya seperti list.

Directive Event

v-on digunakan untuk menangani event, misalnya saat sesuatu diklik, disentuh, di-scroll, dsb. Khusus directive ini, biasanya disingkat menjadi simbol @.

Demikian pengenalan singkat tentang directive pada Vue JS yang dapat Anda pelajari. Untuk dokumentasi lengkap mengenai directive VueJS, dapat dilihat pada link berikut. Directives | Vue.js 

Cara Install Vue JS di Localhost

Setelah memahami pengertian, konsep, dan struktur dasar Vue JS, selanjutnya Anda dapat menyimak tutorial Vue JS yaitu membuat aplikasi pertama melalui localhost. Simak cara install Vue JS di localhost melalui artikel berikut : cara install vue js di localhost

Berikut tadi penjelasan mengenai konsep dan struktur dasar Vue JS tutorial, hingga cara instalasinya di localhost. Semoga bermanfaat!