Malay

Tutorial VueJS

VueJS - Pengenalan

Hai sana, para pengembang web yang sedang berkembang! Saya sangat senang menjadi panduan Anda dalam perjalanan menarik ini ke dunia Vue.js. Sebagai orang yang telah mengajar pemrograman 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 temukan mengapa Vue.js menjadi favorit diantara pengembang seluruh dunia!

VueJS - Introduction

Apa Itu Vue.js?

Vue.js adalah kerangka kerja JavaScript yang progresif yang digunakan untuk membangun antarmuka pengguna. Sekarang, saya tahu itu mungkin terdengar menakutkan, tapi pikirkan itu seperti sebuah kotak peralatan yang penuh dengan peralatan yang praktis yang membuat membuat situs web interaktif menjadi mudah.

Ketika saya pertama kali menemukan Vue.js, itu mengingatkan saya pada mengassembly blok LEGO. Anda mulai dengan potongan kecil dan dapat dikelola dan secara bertahap membangun sesuatu yang menakjubkan. Itu keindahan Vue.js - itu mudah dipahami, multifungsi, dan kuat.

Mengapa Memilih Vue.js?

  1. Mudah dipelajari: Jika JavaScript adalah bahasa, Vue.js akan menjadi dialek ramahnya yang mudah dipahami.
  2. Flexibel: Itu menyesuaikan dengan kebutuhan Anda, baik Anda membangun widget sederhana atau aplikasi kompleks.
  3. Kinerja: Itu ringan dan cepat, seperti mobil sport tetapi untuk pengembangan web.
  4. Komunitas pendukung: Selalu ada orang yang siap membantu ketika Anda kesulitan.

Sekarang, mari kita merusaknya dengan beberapa kode!

Aplikasi Vue.js Pertama Anda

Contoh

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

Output

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

Hello, Vue!

Console Details

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

Memecah Kode

Marilah kita membongkar kode ini seperti kita di kelas anatomi yang menyenangkan dan nerd:

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

  2. Skrip Vue.js:

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

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

  3. Kontainer App:

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

    <div> ini adalah tempat dimana aplikasi Vue kita akan berada. Kurung kurawal ganda {{ }} adalah cara Vue mengatakan, "Hey, saya akan menempatkan konten dinamis di sini!"

  4. Instance Vue:

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

    Ini adalah tempat dimana magik terjadi! Marilah kita membongkar lebih lanjut:

  • new Vue({...}) membuat instance Vue baru.
  • el: '#app' mengatakan ke Vue untuk terhubung ke elemen DOM dengan ID 'app'.
  • data: { message: 'Hello, Vue!' } seperti memberikan Vue sebuah tas penuh dengan data untuk dibawa.

Membuat Itu Interaktif

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

Contoh

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

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

Output

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

The message is: Hello, Vue!

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

Console Details

Kembali, konsol Anda seharusnya bebas dari kesalahan. Jika Anda mengetik app.message di konsol, 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 string magis yang menghubungkan field input dan data message kita.

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

Methods di Vue

Marilah kita menambahkan beberapa perilaku ke aplikasi kita:

Contoh

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

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

Output

Anda akan melihat:

Hello, Vue!
[Reverse Message]

Menekan tombol akan membalikkan pesan!

Console Details

Coba mengetik app.reverseMessage() di konsol. Itu akan membalikkan pesan seperti menekan tombol!

Memahami Methods

  1. methods object: Ini adalah tempat kita mendefinisikan fungsi yang menambahkan perilaku ke aplikasi kita.

  2. v-on:click: Direktif ini menambahkan listener event ke tombol. Saat ditekan, itu memanggil metode reverseMessage kita.

  3. this.message: Dalam metode Vue, this merujuk ke instance Vue, memungkinkan kita mengakses dan memodifikasi data kita.

Reaktivitas Vue dalam Aksi

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 Anda.

Kesimpulan

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

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

Dalam pelajaran berikutnya, kita akan menjelajahi 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 lebih banyak, atau membuat metode baru. Semakin Anda bermain, semakin Anda akan belajar!

Happy coding, future Vue masters! ??‍??‍?

Credits: Image by storyset

Tutorial Sebelumnya:
VueJS - Tetapan Persekitaran
Tutorial Seterusnya:
VueJS - Instan