Malay

Tutorial VueJS

Panduan VueJS: Memulai Dengan Vue.js

Hai, para pengembang web yang sedang mencari ilmu! 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 bisa katakan bahwa Vue.js adalah salah satu kerangka kerja yang paling ramah bagi pemula. mari kita masuk dan buat sesuatu yang menakjubkan bersama!

VueJS - Home

Apa Itu Vue.js?

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

Mengapa Vue.js?

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

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 merekomendasikan Chrome atau Firefox)
  • Penyunting teks (VS Code adalah favorit pribadi saya)

Menyiapkan Proyek Vue.js Pertama Anda

Ayo mulai dengan menciptakan 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="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My First Vue App</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
</head>
<body>
<div id="app">
{{ message }}
</div>

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

mari kitauraikan 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 gunakan {{ message }}. 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 message. 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 menciptakan aplikasi Vue.js pertama Anda!

Direktif Vue: Membuat Hal-Hal Interaktif

Sekarang kita telah mengenal dasar-dasar, mari kita membuat aplikasi kita sedikit lebih interaktif. Vue menyediakan direktif - atribut khusus yang memberikan petunjuk kepada Vue bagaimana perilakunya. Mari kita lihat beberapa yang umum:

v-model: Pengikatan Data Dua Arah

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

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

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

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

v-if dan v-else: Penyajian bersyarat

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="isVisible">Sekarang Anda melihatku!</p>
<p v-else>Sekarang Anda tidak melihatku!</p>
</div>

<script>
new Vue({
el: '#app',
data: {
isVisible: true
},
methods: {
toggleVisibility() {
this.isVisible = !this.isVisible
}
}
})
</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 tepat:

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

<script>
new Vue({
el: '#app',
data: {
fruits: ['Apple', 'Banana', 'Cherry', 'Durian']
}
})
</script>

Ini akan menampilkan daftar buah. Itu mudah sekali!

Metode dalam Vue

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

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

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

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

Properti Terhitung: Kalkulasi Cerdas

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

<div id="app">
<input v-model="firstName">
<input v-model="lastName">
<p>Nama Lengkap: {{ fullName }}</p>
</div>

<script>
new Vue({
el: '#app',
data: {
firstName: '',
lastName: ''
},
computed: {
fullName() {
return this.firstName + ' ' + this.lastName
}
}
})
</script>

Di sini, fullName adalah properti terhitung yang menggabungkan firstName dan lastName. Itu akan secara otomatis update ketika salah satu dependensinya berubah.

Ringkasan Metode Vue

Berikut adalah tabel yang menguraikan metode Vue.js yang kita bahas:

Metode Deskripsi Contoh
data Menyimpan data untuk instance Vue data: { message: 'Hello' }
methods Mengandung fungsi untuk menambah perilaku methods: { greet() { alert('Hi!') } }
computed Properti yang disimpan dan update saat dependensinya berubah computed: { fullName() { return this.firstName + ' ' + this.lastName } }
el Menentukan elemen tempat instance Vue dipasang el: '#app'

Kesimpulan

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

Ingat, belajar mengkode adalah seperti belajar bahasa baru - itu memerlukan latihan dan kesabaran. Jangan frustasi jika segala sesuatu tidak langsung berjalan mulus. Terus mencoba, terus membangun, dan yang paling penting, terus bersenang-senang!

Dalam pelajaran berikutnya, kita akan mendalamkan pengetahuan tentang komponen, blok bangunan dari aplikasi Vue yang lebih besar. Sampaijumpa nanti, selamat coding!

Credits: Image by storyset

 
Tutorial Seterusnya:
VueJS - ringsum