Perkenalan

Vue.js adalah kerangka kerja JavaScript progresif yang mendapatkan popularitas di kalangan pengembang frontend karena kesederhanaan dan fleksibilitasnya. Baik Anda baru mengenal pengembangan frontend atau ingin mengembangkan keterampilan Anda, panduan pemula ini akan memberi Anda dasar yang kuat untuk mulai membangun aplikasi web interaktif dengan Vue.js.

Apa itu Vue 3?

Vue 3 dibangun berdasarkan kesuksesan pendahulunya, Vue 2, dan memperkenalkan beberapa perbaikan signifikan. Berikut beberapa fitur utama Vue 3:

  • Composition API: Vue 3 memperkenalkan Composition API, cara yang ampuh untuk mengatur dan menggunakan kembali logika dalam komponen. Ini menawarkan lebih banyak fleksibilitas dan meningkatkan organisasi kode dibandingkan dengan Options API di Vue 2.
  • Sistem Reaktivitas: Sistem reaktivitas Vue 3 telah ditingkatkan untuk memberikan kinerja yang lebih baik dan dukungan TypeScript. Sistem berbasis Proxy yang baru memungkinkan pelacakan dependensi yang lebih detail, sehingga menghasilkan pembaruan yang lebih efisien.
  • Fragmen dan Teleportasi: Vue 3 memperkenalkan fragmen, memungkinkan komponen mengembalikan beberapa elemen root. Teleport, fitur baru lainnya, memungkinkan rendering konten di berbagai bagian pohon DOM, sehingga berguna untuk modals, tooltips, dan banyak lagi.

Menyiapkan Proyek Vue 3

Untuk memulai proyek Vue 3, Anda dapat menggunakan Vue CLI, sebuah alat baris perintah yang dirancang khusus untuk proyek Vue. Inilah cara Anda menyiapkan proyek Vue 3 dengan Vue CLI.

  • Instal Vue CLI secara global dengan menjalankan npm install -g @vue/cli.
  • Buat proyek Vue 3 baru dengan mengeksekusi vue create project-name.
  • Pilih preset default atau pilih fitur secara manual sesuai dengan kebutuhan proyek Anda.
  • Setelah proyek dibuat, navigasikan ke direktori proyek menggunakan cd project-name.
  • Mulai server pengembangan dengan npm run serve dan akses proyek di URL lokal yang disediakan.

Anda juga dapat mengatur proyek Anda dengan Vite, yang merupakan alat pembangunan baru di ekosistem Vue yang memiliki server pengembangan yang jauh lebih cepat daripada Vue CLI (10–100x lebih cepat).

Prasyarat:

  • Pastikan Anda telah menginstal Node.js di mesin Anda. Anda dapat mendownloadnya dari situs resmi: https://nodejs.org

Perintah ini akan menginstal dan menjalankan create-vue, alat scaffolding proyek Vue resmi. Anda akan diberikan petunjuk untuk beberapa fitur opsional seperti TypeScript dan dukungan pengujian:

✔ Project name: … <your-project-name>
✔ Add TypeScript? … No / Yes
✔ Add JSX Support? … No / Yes
✔ Add Vue Router for Single Page Application development? … No / Yes
✔ Add Pinia for state management? … No / Yes
✔ Add Vitest for Unit testing? … No / Yes
✔ Add an End-to-End Testing Solution? … No / Cypress / Playwright
✔ Add ESLint for code quality? … No / Yes
✔ Add Prettier for code formatting? … No / Yes

Scaffolding project in ./<your-project-name>...
Done.

Jika Anda tidak yakin tentang suatu pilihan, cukup pilih No dengan menekan enter untuk saat ini. Setelah proyek dibuat, ikuti petunjuk untuk menginstal dependensi dan memulai server dev:

> cd <your-project-name>
> npm install
> npm run dev
  • Vite akan membangun proyek Vue 3 Anda dan meluncurkan server pengembangan.
  • Anda dapat mengakses aplikasi Vue Anda di URL lokal yang disediakan (misalnya, http://localhost:3000).

Dan itu saja! Anda sekarang memiliki proyek Vue 3 yang dikonfigurasi dengan Vite. Anda dapat mulai membangun komponen Vue dan menulis logika aplikasi Anda di dalam direktori src.

Membangun Komponen Vue Pertama Anda

Komponen membentuk blok penyusun aplikasi Vue. Di Vue 3, Anda dapat memanfaatkan Composition API untuk membuat komponen yang dapat digunakan kembali dan disusun. Berikut cara membuat komponen Vue 3 pertama Anda:

  • Di direktori proyek, navigasikan ke folder src/components.
  • Buat file baru bernama MyComponent.vue.
  • Buka file dan tentukan templat, skrip, dan gaya untuk komponen menggunakan format Komponen File Tunggal.
  • Di dalam bagian skrip, impor fungsi yang diperlukan dari paket vue, seperti defineComponent dan reactive.
  • Gunakan fungsi defineComponent untuk membuat komponen baru dan menentukan templatnya, properti data reaktif, dan metodenya menggunakan Composition API.
<script setup>
import { ref } from 'vue'

const count = ref(0)
</script>

<template>
  <button @click="count++">You clicked me {{ count }} times.</button>
</template>

Ini adalah komponen tombol sederhana dengan status hitungan. Anda juga dapat menemukan contoh ini di dokumentasi Vue.

Petunjuk Vue 3

Directive di Vue 3 mirip dengan Vue 2, memungkinkan Anda memanipulasi DOM dan menambahkan perilaku dinamis ke komponen Anda. Beberapa arahan yang umum digunakan di Vue 3 meliputi:

  • v-bind: Direktif v-bind memungkinkan Anda mengikat data komponen ke atribut atau props HTML, memperbarui nilai secara dinamis berdasarkan perubahan pada data.
  • v-if dan v-show: Arahan ini mengontrol visibilitas elemen berdasarkan kondisi. Direktif v-if menghapus atau menambahkan elemen ke DOM, sedangkan direktif v-show mengubah visibilitas elemen menggunakan gaya CSS.
  • v-for: Direktif v-for memungkinkan Anda melakukan loop melalui array atau objek untuk merender daftar elemen secara dinamis. Ini menghasilkan beberapa contoh elemen berdasarkan data yang disediakan.
  • v-on: Direktif v-on melampirkan pendengar peristiwa ke elemen dan memicu metode atau ekspresi ketika peristiwa terjadi. Ini memungkinkan Anda menangani interaksi pengguna dan meresponsnya dengan tepat.
  • v-model: Perintah v-model menyederhanakan pengikatan data dua arah untuk masukan formulir, secara otomatis menyinkronkan nilai masukan dengan properti data komponen.

Mengelola Data dengan Vue

  • ref — Mengambil nilai dalam dan mengembalikan objek ref yang reaktif dan dapat diubah, yang memiliki properti tunggal .value yang menunjuk ke nilai dalam. Lihat contoh di atas.
  • Di Vue 3, Anda dapat menggunakan fungsi reactive dari paket vue untuk mendefinisikan objek data reaktif. Objek ini secara otomatis memicu pembaruan di UI ketika propertinya berubah.
  • Properti yang Dihitung: Properti yang dihitung adalah fungsi yang menghitung dan menyimpan nilai dalam cache berdasarkan ketergantungan reaktif. Mereka memungkinkan Anda melakukan penghitungan atau transformasi pada data dan memberikan hasil yang efisien.
  • Pengamat: Pengamat memungkinkan Anda melakukan tindakan ketika properti data tertentu berubah. Dengan menggunakan fungsi watch dari paket vue, Anda dapat menentukan logika khusus untuk dijalankan ketika data yang dipantau berubah.

Kesimpulan

Selamat! Anda sekarang telah diperkenalkan dengan dunia Vue.js dan telah memperoleh pemahaman yang kuat tentang beberapa konsep intinya. Di bagian kedua, kita akan mengeksplorasi beberapa konsep lebih lanjut, seperti peristiwa dan metode, pengikatan formulir dan masukan, perutean, penataan gaya, dan penerapan.

Ingat, latihan dan eksperimen adalah kunci untuk menguasai teknologi apa pun, jadi teruslah membangun dan mengeksplorasi kemungkinan-kemungkinan menarik dengan Vue!

Konten lainnya di PlainEnglish.io.

Daftar ke buletin mingguan gratis kami. Ikuti kami di "Twitter", "LinkedIn", "YouTube", dan "Discord" .