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
, sepertidefineComponent
danreactive
. - 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
: Direktifv-bind
memungkinkan Anda mengikat data komponen ke atribut atau props HTML, memperbarui nilai secara dinamis berdasarkan perubahan pada data.v-if
danv-show
: Arahan ini mengontrol visibilitas elemen berdasarkan kondisi. Direktifv-if
menghapus atau menambahkan elemen ke DOM, sedangkan direktifv-show
mengubah visibilitas elemen menggunakan gaya CSS.v-for
: Direktifv-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
: Direktifv-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
: Perintahv-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 paketvue
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 paketvue
, 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" .