Indonesia

Tutorial VueJS

Panduan VueJS: Memulai Dengan Vue.js

Halo, para pengembang web yang bersemangat! Saya sangat senang menjadi panduan Anda dalam perjalanan menarik ini ke dunia Vue.js. Sebagai orang yang telah mengajar ilmu komputer selama lebih dari satu dekade, saya dapat mengatakan bahwa Vue.js adalah salah satu kerangka kerja yang paling ramah bagi pemula. Jadi, mari kita masuk dan buat sesuatu yang magis bersama!

VueJS - Home

Apa Itu Vue.js?

Vue.js adalah kerangka kerja JavaScript yang progresif untuk membangun antarmuka pengguna. Tetapi apa artinya itu dalam bahasa biasa? Baiklah, bayangkan Anda sedang membangun sebuah rumah. Vue.js seperti sebuah set tembok dan kamar prefabricat yang Anda dapat dengan mudah rangkai untuk membuat rumah impian Anda. Itu membuat membangun aplikasi web kompleks menjadi semudah mengassembly blok LEGO!

Mengapa Vue.js?

  1. Mudah dipelajari
  2. Fleksibel dan dapat diperbesar
  3. Performa yang bagus
  4. Dukungan komunitas yang menyenangkan

Prasyarat

Sebelum kita mulai, mari pastikan kita memiliki segala sesuatu yang diperlukan:

  • Pengetahuan dasar tentang HTML dan CSS
  • Kesempatan dengan JavaScript (jangan khawatir jika Anda bukan ahli!)
  • Browser modern (saya sarankan Chrome atau Firefox)
  • Editor teks (VS Code adalah favorit pribadi saya)

Menyiapkan Proyek Vue.js Pertama Anda

Mari kita mulai dengan membuat aplikasi sederhana "Hello, Vue!". Pertama-tama, kita perlu menyertakan Vue.js dalam proyek kita. Kita dapat melakukan ini dengan menambahkan tag script ke file HTML kita.

<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Aplikasi Vue Pertama Saya</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
</head>
<body>
<div id="app">
{{ pesan }}
</div>

<script>
new Vue({
el: '#app',
data: {
pesan: 'Hello, Vue!'
}
})
</script>
</body>
</html>

mariuraikan ini:

  1. Kita menyertakan pustaka Vue.js menggunakan link CDN.
  2. Kita membuat <div> dengan id "app". Ini adalah tempat aplikasi Vue kita akan berada.
  3. Dalam div, kita menggunakan {{ pesan }}. Ini disebut interpolasi, dan itu adalah cara kita menampilkan data di Vue.
  4. Dalam tag <script>, kita membuat instance Vue baru, mengatakan kepadanya untuk menargetkan elemen dengan id "app".
  5. Kita menentukan objek data dengan properti pesan. Ini adalah data yang Vue akan gunakan dalam aplikasi kita.

Jika Anda menyimpan file ini dan membukanya di browser, Anda seharusnya melihat "Hello, Vue!" ditampilkan di halaman. Selamat! Anda baru saja membuat aplikasi Vue.js pertama Anda!

Direktif Vue: Membuat Hal-hal Interaktif

Sekarang kita sudah mengenal dasarnya, mari kita membuat aplikasi kita sedikit lebih interaktif. Vue menyediakan kita dengan direktif - atribut khusus yang memberikan instruksi kepada Vue bagaimana perilakunya. Mari kita lihat beberapa yang umum:

v-model: Binding Data Dua Arah

v-model membuat binding dua arah antara input formulir dan keadaan aplikasi. Mari kita perbarui aplikasi kita untuk termasuk field input:

<div id="app">
<input v-model="pesan">
<p>Pesan adalah: {{ pesan }}</p>
</div>

<script>
new Vue({
el: '#app',
data: {
pesan: 'Hello, Vue!'
}
})
</script>

Sekarang, ketika Anda mengetik dalam field input, Anda akan melihat pesan update secara real-time. Itu seperti magis, bukan?

v-if dan v-else: Penyajian Kondisional

kadang-kadang kita ingin menampilkan atau menyembunyikan elemen berdasarkan kondisi. Itu di mana v-if dan v-else berguna:

<div id="app">
<button @click="toggleVisibility">Toggle Pesan</button>
<p v-if="terlihat">Sekarang Anda melihatku!</p>
<p v-else>Sekarang Anda tidak melihatku!</p>
</div>

<script>
new Vue({
el: '#app',
data: {
terlihat: true
},
methods: {
toggleVisibility() {
this.terlihat = !this.terlihat
}
}
})
</script>

Dalam contoh ini, kita menggunakan v-if dan v-else untuk toggle antara dua pesan. Direktif @click adalah singkatan untuk v-on:click, yang mendengarkan event klik.

v-for: Penyajian Daftar

Ketika kita perlu menampilkan daftar item, v-for adalah direktif yang kita gunakan:

<div id="app">
<ul>
<li v-for="buah in buah-buahan">{{ buah }}</li>
</ul>
</div>

<script>
new Vue({
el: '#app',
data: {
buah-buahan: ['Apel', 'Banana', 'Ceri', 'Durian']
}
})
</script>

Ini akan menampilkan daftar buah-buahan. Itu mudah sekali!

Metode Dalam Vue

Metode adalah fungsi yang kita dapat gunakan untuk menambah perilaku ke instance Vue kita. Mari kita buat penghitung sederhana:

<div id="app">
<p>Hitungan: {{ hitungan }}</p>
<button @click="increment">Increment</button>
<button @click="decrement">Decrement</button>
</div>

<script>
new Vue({
el: '#app',
data: {
hitungan: 0
},
methods: {
increment() {
this.hitungan++
},
decrement() {
this.hitungan--
}
}
})
</script>

Di sini, kita telah menentukan dua metode: increment dan decrement. Metode ini dipanggil ketika tombol masing-masing diklik, memperbarui properti hitungan data kita.

Properti Terhitung: Perhitungan Cerdas

Properti terhitung adalah seperti properti data yang super-powered. Mereka dapat melakukan perhitungan kompleks dan disimpan berdasarkan dependensinya. Mari kita lihat contoh:

<div id="app">
<input v-model="namaDepan">
<input v-model="namaBelakang">
<p>Nama Lengkap: {{ namaLengkap }}</p>
</div>

<script>
new Vue({
el: '#app',
data: {
namaDepan: '',
namaBelakang: ''
},
computed: {
namaLengkap() {
return this.namaDepan + ' ' + this.namaBelakang
}
}
})
</script>

Di sini, namaLengkap adalah properti terhitung yang menggabungkan namaDepan dan namaBelakang. Itu akan otomatis update ketika salah satu dependensinya berubah.

Ringkasan Metode Vue

Berikut adalah tabel yang menggabungkan metode Vue.js yang kita telah bahas:

Metode Deskripsi Contoh
data Menyimpan data untuk instance Vue data: { pesan: 'Hello' }
methods Mengandung fungsi untuk menambah perilaku methods: { greet() { alert('Hi!') } }
computed Properti yang disimpan dan update saat dependensi berubah computed: { namaLengkap() { return this.namaDepan + ' ' + this.namaBelakang } }
el Menentukan elemen untuk mengaitkan instance Vue el: '#app'

Kesimpulan

Selamat! Anda telah mengambil langkah pertama ke dalam dunia Vue.js yang menakjubkan. Kita telah melihat dasar-dasar membuat instance Vue, menggunakan direktif untuk interaktivitas, dan menambah perilaku dengan metode dan properti terhitung.

Ingat, belajar mengoding adalah seperti belajar bahasa baru - itu memerlukan latihan dan kesabaran. Jangan frustasi jika segala sesuatu tidak langsung berjalan mulus. Tetap mencoba, terus membangun, dan terutama, tetap bersenang-senang!

Dalam pelajaran berikutnya, kita akan mendalamkan pengetahuan kita tentang komponen, blok bangunan aplikasi Vue yang lebih besar. Sampai jumpa nanti! Selamat berkoding!

Credits: Image by storyset

 
Tutorial Selanjutnya:
VueJS - Tinjauan Umum