Daftar Isi

1. Pengantar Vue.js
2. Instalasi dan Setup
3. Struktur Dasar Vue
4. Data Binding
5. Direktif Vue
6. Komponen
7. Event Handling
8. Computed dan Watchers
9. Vue Router
10. Vuex (State Management)
11. Tips dan Trik
12. Penutup

1. Pengantar Vue.js

Vue.js adalah framework JavaScript progresif yang digunakan untuk membangun antarmuka pengguna (user interfaces) dan aplikasi single-page (SPA). Vue dirancang agar mudah dipelajari dan diintegrasikan dengan proyek lain, serta sangat fleksibel untuk pengembangan aplikasi skala kecil hingga besar.

Vue.js dikembangkan oleh Evan You dan pertama kali dirilis pada tahun 2014. Sejak itu, Vue telah menjadi salah satu framework JavaScript paling populer di dunia, terutama karena kemudahan penggunaannya dan dokumentasi yang sangat lengkap.

2. Instalasi dan Setup

Ada beberapa cara untuk mulai menggunakan Vue.js, mulai dari menyisipkan CDN langsung ke dalam file HTML hingga menggunakan Vue CLI untuk proyek yang lebih kompleks.

Menggunakan CDN

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
      

Cara ini cocok untuk belajar dan membuat prototipe sederhana.

Menggunakan Vue CLI

Vue CLI adalah alat resmi untuk membuat proyek Vue yang lengkap dengan konfigurasi build otomatis.

npm install -g @vue/cli
vue create nama-proyek
      

3. Struktur Dasar Vue

File Vue biasanya memiliki ekstensi .vue dan terdiri dari tiga bagian utama:

• Template: Bagian HTML yang mendefinisikan tampilan komponen.
• Script: Bagian JavaScript yang mengatur logika komponen.
• Style: Bagian CSS untuk styling komponen.

<template>
  <div>Halo, Vue!</div>
</template>

<script>
export default {
  name: 'HelloWorld'
}
</script>

<style scoped>
div {
  color: #42b983;
}
</style>
      

4. Data Binding

Data binding adalah cara menghubungkan data JavaScript dengan tampilan HTML secara otomatis. Vue menyediakan binding satu arah dan dua arah.

Binding Satu Arah

Menggunakan v-bind atau shorthand : untuk mengikat atribut HTML ke data.

<template>
  <img :src="imageSrc" alt="Gambar contoh" />
</template>

<script>
export default {
  data() {
    return {
      imageSrc: 'https://placehold.co/200x200/png?text=Contoh+Gambar'
    }
  }
}
</script>
      

Binding Dua Arah

Menggunakan v-model untuk mengikat data input dengan variabel secara dua arah.

<template>
  <input v-model="nama" placeholder="Masukkan nama" />
  <p>Halo, {{ nama }}!</p>
</template>

<script>
export default {
  data() {
    return {
      nama: ''
    }
  }
}
</script>
      

5. Direktif Vue

Direktif adalah atribut khusus yang memberikan instruksi pada DOM. Beberapa direktif penting:

• v-if : Menampilkan elemen jika kondisi benar.
• v-else : Menampilkan elemen jika kondisi v-if salah.
• v-for : Melakukan perulangan pada data.
• v-show : Menampilkan elemen dengan CSS display berdasarkan kondisi.
• v-on : Menangani event, shorthand @ .

<template>
  <div>
    <p v-if="isLoggedIn">Selamat datang!</p>
    <p v-else>Silakan login.</p>

    <ul>
      <li v-for="item in items" :key="item.id">{{ item.name }}</li>
    </ul>

    <button @click="logout">Logout</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isLoggedIn: true,
      items: [
        { id: 1, name: 'Vue.js' },
        { id: 2, name: 'React' },
        { id: 3, name: 'Angular' }
      ]
    }
  },
  methods: {
    logout() {
      this.isLoggedIn = false;
    }
  }
}
</script>
      

6. Komponen

Komponen adalah blok bangunan utama dalam Vue yang memungkinkan pembuatan UI yang dapat digunakan ulang.

Membuat Komponen Sederhana

<template>
  <button @click="$emit('increment')" class="bg-indigo-600 text-white px-4 py-2 rounded">
    Tambah
  </button>
</template>

<script>
export default {
  name: 'TambahButton'
}
</script>
      

Menggunakan Komponen

<template>
  <div>
    <p>Jumlah: {{ count }}</p>
    <TambahButton @increment="count++" />
  </div>
</template>

<script>
import TambahButton from './TambahButton.vue'

export default {
  components: { TambahButton },
  data() {
    return {
      count: 0
    }
  }
}
</script>
      

7. Event Handling

Vue memudahkan penanganan event DOM menggunakan direktif v-on atau shorthand @ .

<template>
  <button @click="handleClick">Klik Saya</button>
</template>

<script>
export default {
  methods: {
    handleClick() {
      alert('Tombol diklik!');
    }
  }
}
</script>
      

Anda juga bisa menangani event keyboard, mouse, dan event khusus lainnya dengan mudah.

8. Computed dan Watchers

Computed properties dan watchers digunakan untuk memproses data secara reaktif.

Computed Properties

Computed properties adalah properti yang dihitung berdasarkan data lain dan secara otomatis diperbarui saat data tersebut berubah.

<template>
  <div>
    <input v-model="namaDepan" placeholder="Nama Depan" />
    <input v-model="namaBelakang" placeholder="Nama Belakang" />
    <p>Nama Lengkap: {{ namaLengkap }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      namaDepan: '',
      namaBelakang: ''
    }
  },
  computed: {
    namaLengkap() {
      return this.namaDepan + ' ' + this.namaBelakang;
    }
  }
}
</script>
      

Watchers

Watchers digunakan untuk menjalankan fungsi ketika data tertentu berubah.

<script>
export default {
  data() {
    return {
      count: 0
    }
  },
  watch: {
    count(newVal, oldVal) {
      console.log(`Count berubah dari ${oldVal} ke ${newVal}`);
    }
  }
}
</script>
      

9. Vue Router

Vue Router adalah pustaka resmi untuk mengelola routing dalam aplikasi Vue, memungkinkan pembuatan aplikasi single-page dengan navigasi antar halaman tanpa reload.

Instalasi Vue Router

npm install vue-router@4
      

Contoh Penggunaan

import { createRouter, createWebHistory } from 'vue-router'
import Home from './views/Home.vue'
import About from './views/About.vue'

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About }
]

const router = createRouter({
  history: createWebHistory(),
  routes
})

export default router
      

10. Vuex (State Management)

Vuex adalah pustaka manajemen state resmi untuk Vue yang membantu mengelola data aplikasi secara terpusat dan terstruktur.

Instalasi Vuex

npm install vuex@4
      

Contoh Store Vuex

import { createStore } from 'vuex'

const store = createStore({
  state() {
    return {
      count: 0
    }
  },
  mutations: {
    increment(state) {
      state.count++
    }
  },
  actions: {
    increment({ commit }) {
      commit('increment')
    }
  }
})

export default store
      

11. Tips dan Trik

• Gunakan Vue Devtools: Untuk debugging dan inspeksi state aplikasi Vue secara real-time.
• Manfaatkan Komposisi API: Vue 3 menyediakan Composition API yang lebih fleksibel untuk mengelola logika komponen.
• Optimalkan performa: Gunakan lazy loading komponen dan optimasi rendering.
• Gunakan slot: Untuk membuat komponen yang lebih fleksibel dan reusable.
• Ikuti best practices: Struktur proyek yang rapi dan penamaan yang konsisten.

12. Penutup

Vue.js adalah framework yang powerful dan mudah dipelajari, cocok untuk pemula maupun profesional. Dengan memahami konsep dasar hingga fitur lanjutan, Anda dapat membangun aplikasi web modern yang responsif dan efisien.

Teruslah bereksperimen dan eksplorasi dokumentasi resmi Vue untuk menguasai framework ini secara mendalam. Selamat belajar dan semoga sukses dalam perjalanan pengembangan aplikasi Anda!