Indonesia

Tutorial VueJS

VueJS - Pengenalan

Hai teman-teman pengembang web yang sedang mencari ilmu! Saya sangat gembira bisa menjadi panduan Anda dalam perjalanan menarik ini ke dunia Vue.js. Sebagai seseorang yang telah mengajarkan pemrograman selama lebih dari satu dekade, saya bisa katakan bahwa Vue.js adalah salah satu kerangka kerja yang paling mudah untuk dipelajari. Jadi, mari kita masuk dan temukan mengapa Vue.js menjadi favorit di kalangan pengembang seluruh dunia!

VueJS - Introduction

Apa Itu Vue.js?

Vue.js adalah kerangka kerja JavaScript渐进式 yang digunakan untuk membangun antarmuka pengguna. Saya tahu itu mungkin terdengar menakutkan, tapi pikirkan itu seperti sebuah kotak alat penuh dengan peralatan yang praktis yang membuat membuat situs web interaktif menjadi hal yang mudah.

Ketika saya pertama kali mengenal Vue.js, itu membuat saya ingat pada menyusun blok LEGO. Anda mulai dengan beberapa bagian kecil dan dapat menciptakan sesuatu yang menakjubkan secara bertahap. Itu keindahan Vue.js - itu mudah dipahami, fleksibel, dan kuat.

Mengapa Memilih Vue.js?

  1. Mudah dipelajari: Jika JavaScript adalah sebuah bahasa, Vue.js akan menjadi dialek yang ramah dan mudah dipelajari.
  2. Fleksibel: Itu menyesuaikan dengan kebutuhan Anda, baik Anda sedang membuat widget sederhana atau aplikasi kompleks.
  3. Kinerja: Itu ringan dan cepat, seperti mobil sport tapi untuk pengembangan web.
  4. Komunitas pendukung: Selalu ada orang yang siap membantu Anda saat Anda kesulitan.

Sekarang, mari kita meraba-raba beberapa kode!

Aplikasi Vue.js Pertama Anda

Contoh

<!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>
var app = new Vue({
el: '#app',
data: {
pesan: 'Hai, Vue!'
}
})
</script>
</body>
</html>

Output

Ketika Anda membuka file HTML ini di browser Anda, Anda akan melihat:

Hai, Vue!

Console Details

Jika Anda membuka console browser Anda, Anda tidak akan melihat kesalahan. Itu adalah awal yang bagus!

Memecah Kode

Mari kita menganalisis kode ini seperti kita di kelas anatomi yang menyenangkan dan nerd:

  1. Struktur HTML: Kita memiliki dokumen HTML dasar. Tidak ada yang menakutkan disini!

  2. Script Vue.js:

    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>

    Baris ini seperti mengundang Vue.js ke pesta kita. Itu memuat pustaka Vue.js dari jaringan pengiriman konten (CDN).

  3. Kontainer Aplikasi:

    <div id="app">
{{ pesan }}
</div>

    <div> ini adalah tempat aplikasi Vue kita akan berada. Gandaan kurung {{ }} adalah cara Vue mengatakan, "Hey, saya akan menempatkan konten dinamis disini!"

  4. Instance Vue:

    var app = new Vue({
el: '#app',
data: {
pesan: 'Hai, Vue!'
}
})

    Ini adalah tempat magik terjadi! Mari kita pecahkan itu lebih lanjut:

  • new Vue({...}) membuat instance Vue baru.
  • el: '#app' memberitahu Vue untuk menghubungkan ke elemen DOM dengan ID 'app'.
  • data: { pesan: 'Hai, Vue!' } seperti memberikan Vue sebuah tas penuh data untuk dibawa.

Membuat Itu Interaktif

Sekarang, mari kita menambahkan sedikit rasa. Kita akan membuat aplikasi kita merespon masukan pengguna:

Contoh

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

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

Output

Anda akan melihat field input dengan "Hai, Vue!" terisi sebelumnya, dan di bawah itu:

Pesan adalah: Hai, Vue!

Saat Anda mengetik di field input, pesan di bawah akan terupdate secara real-time!

Console Details

Kembali, console Anda seharusnya bebas dari kesalahan. Jika Anda mengetik app.pesan di console, Anda akan melihat nilai pesan saat ini.

Apa yang Terjadi disini?

  1. v-model: Ini adalah direktif Vue yang membuat pengikatan data dua arah pada form input. Itu seperti sebuah tali magis yang menghubungkan field input dan data pesan kita.

  2. Update real-time: Vue secara otomatis memperbarui DOM saat data berubah. Tidak perlu manipulasi DOM manual!

Metode di Vue

Mari kita menambahkan beberapa perilaku ke aplikasi kita:

Contoh

<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue dengan Metode</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
</head>
<body>
<div id="app">
<p>{{ pesan }}</p>
<button v-on:click="balikkanPesan">Balikkan Pesan</button>
</div>

<script>
var app = new Vue({
el: '#app',
data: {
pesan: 'Hai, Vue!'
},
methods: {
balikkanPesan: function() {
this.pesan = this.pesan.split('').reverse().join('')
}
}
})
</script>
</body>
</html>

Output

Anda akan melihat:

Hai, Vue!
[Balikkan Pesan]

Menekan tombol akan membalikkan pesan!

Console Details

Coba mengetik app.balikkanPesan() di console. Itu akan membalikkan pesan sama seperti menekan tombol!

Pencegahan Reactivitas Vue

Apa yang kita lihat adalah sistem reaktivitas Vue yang bekerja. Saat data berubah, Vue secara otomatis memperbarui DOM. Itu seperti memiliki asisten setia yang segera memperbarui papan putih Anda saat Anda mengubah catatan.

Kesimpulan

Selamat! Anda telah mengambil langkah pertama ke dalam dunia menakjubkan Vue.js. Kita telah menutupi dasar-dasar membuat instance Vue, bekerja dengan data, dan menambahkan interaktivitas dengan metode.

Ingat, belajar pemrograman adalah seperti belajar memasak. Anda mulai dengan resep sederhana (seperti contoh kita), dan sebelum Anda sadari, Anda menciptakan aplikasi yang kompleks dan menakjubkan yang mempesona semua orang!

Dalam pelajaran berikutnya, kita akan eksplorasi lebih banyak fitur Vue seperti properti komputasi dan hook lifecycle. Sampai saat itu, terus mencoba apa yang Anda pelajari. Cobalah mengubah pesan, menambahkan properti data lain, atau membuat metode baru. Semakin banyak Anda bermain, semakin banyak Anda belajar!

Happy coding, para master Vue masa depan! ??‍??‍?

Credits: Image by storyset

Tutorial Sebelumnya:
VueJS - Pengaturan Lingkungan
Tutorial Selanjutnya:
VueJS - Instansi