Malay

Tutorial VueJS

VueJS - contoh

Hai teman-teman pemula pengembang web! Hari ini, kita akan melihat dunia yang menakjubkan dari contoh Vue.js. Jangan khawatir jika Anda baru dalam pemrograman - saya akan memandu Anda langkah demi langkah, seperti yang saya lakukan untuk ribuan siswa selama tahun-tahun mengajar. Jadi, ambil secangkir kopi (atau teh, jika itu hal Anda), dan mari kita mulai!

VueJS - Instances

Apa Itu Contoh Vue?

Sebelum kita masuk ke kode, mari kita pahami apa itu contoh Vue. Bayangkan Anda sedang membangun sebuah rumah. Contoh Vue adalah seperti dasar rumah itu - tempat dimulainya segala sesuatu. Itu adalah inti yang mengontrol seluruh aplikasi Vue Anda.

Sintaks

Membuat contoh Vue sungguh-sungguh mudah. Ini adalah sintaks dasar:

new Vue({
// opsi
})

Itu saja! Kami menggunakan kata kunci new diikuti oleh Vue(), dan di dalam tanda kurung, kita passingkan sebuah objek dengan berbagai opsi. Opsi ini adalah seperti rancangan untuk rumah kita - mereka memberitahu Vue bagaimana kita ingin aplikasi kita berperilaku.

Contoh Pertama Vue

Mari kita buat contoh pertama Vue bersama-sama. Jangan khawatir jika Anda belum mengerti segala sesuatu sekarang - kita akan membongkar itu bagian demi bagian.

Contoh 1

<!DOCTYPE html>
<html>
<head>
<title>Contoh Vue Pertama</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: 'Halo, Vue!'
}
})
</script>
</body>
</html>

Output

Halo, Vue!

Sekarang, mari kitauraikan ini:

  1. Kita menyertakan pustaka Vue.js di dalam file HTML kita.
  2. Kita membuat sebuah <div> dengan id "app". Ini adalah tempat aplikasi Vue kita akan berada.
  3. Di dalam <div>, kita menggunakan {{ pesan }}. Ini disebut interpolasi - itu adalah cara kita menampilkan data di Vue.
  4. Dalam tag <script>, kita membuat sebuah contoh Vue baru.
  5. Kita menggunakan el: '#app' untuk memberitahu Vue elemen mana yang harus dikendalikan (div dengan id "app").
  6. Dalam objek data, kita mendefinisikan properti pesan dengan nilai 'Halo, Vue!'.

Ketika Vue melihat {{ pesan }} di HTML kita, itu diganti dengan nilai pesan dari data kita. Magic, kan?

Data dan Metode

Contoh Vue bisa memiliki lebih dari hanya data. Mereka juga bisa memiliki metode - fungsi yang dapat melakukan aksi atau perhitungan.

Contoh 2

<!DOCTYPE html>
<html>
<head>
<title>Contoh Metode Vue</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: 'Halo, Vue!'
},
metode: {
balikkanPesan: function() {
this.pesan = this.pesan.split('').reverse().join('')
}
}
})
</script>
</body>
</html>

Output

Awalnya, Anda akan melihat "Halo, Vue!" dan tombol. Ketika Anda mengklik tombol, pesan akan terbalik menjadi "!euV ,olleH".

Dalam contoh ini:

  1. Kita menambahkan tombol dengan v-on:click="balikkanPesan". Ini memberitahu Vue untuk memanggil metode balikkanPesan saat tombol diklik.
  2. Dalam contoh Vue kita, kita menambahkan objek metode dengan fungsi balikkanPesan.
  3. Fungsi tersebut memecah pesan menjadi array karakter, membaliknya, dan menggabungkannya kembali menjadi string.
  4. Kita menggunakan this.pesan untuk mengakses dan memodifikasi properti pesan data.

Hook生命周期

Contoh Vue memiliki lifecycle - mereka diciptakan, dimountkan ke DOM, diperbarui, dan akhirnya dihancurkan. Vue menyediakan hook yang memungkinkan Anda menjalankan kode di tahap-tahap khusus dari lifecycle ini.

Contoh

<!DOCTYPE html>
<html>
<head>
<title>Hook Lifecycle Vue</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
</head>
<body>
<div id="app">
<p>{{ pesan }}</p>
</div>

<script>
var app = new Vue({
el: '#app',
data: {
pesan: 'Halo, Vue!'
},
created: function() {
console.log('Contoh Vue diciptakan!')
},
mounted: function() {
console.log('Contoh Vue dimountkan ke DOM!')
this.pesan = 'Selamat Datang ke Vue!'
}
})
</script>
</body>
</html>

Output

Di browser, Anda akan melihat "Selamat Datang ke Vue!". Di console, Anda akan melihat dua pesan:

Contoh Vue diciptakan!
Contoh Vue dimountkan ke DOM!

Ini adalah apa yang terjadi:

  1. Hook created dijalankan saat contoh Vue diciptakan. Kita mencatatkan pesan ke console.
  2. Hook mounted dijalankan saat contoh Vue dimountkan ke DOM. Kita mencatatkan pesan lain dan mengubah properti pesan.

Hook ini sangat berguna untuk menjalankan kode di titik-titik khusus dalam lifecycle aplikasi Anda.

Properti dan Metode Contoh Vue

Contoh Vue juga datang dengan properti dan metode bawaan. Mari kita lihat beberapa:

Contoh

<!DOCTYPE html>
<html>
<head>
<title>Properti dan Metode Contoh Vue</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="updatePesan">Perbarui Pesan</button>
</div>

<script>
var app = new Vue({
el: '#app',
data: {
pesan: 'Halo, Vue!'
},
metode: {
updatePesan: function() {
this.$data.pesan = 'Pesan diperbarui!'
console.log(this.$el)
this.$nextTick(function() {
console.log('DOM diperbarui!')
})
}
}
})

console.log(app.$data)
</script>
</body>
</html>

Dalam contoh ini:

  1. Kita menggunakan this.$data untuk mengakses objek data langsung.
  2. Kita menggunakan this.$el untuk mencatatkan elemen root DOM Vue.
  3. Kita menggunakan this.$nextTick untuk menjalankan fungsi setelah DOM diperbarui.
  4. Di luar contoh Vue, kita dapat mengakses properti menggunakan app.$data.

Berikut adalah tabel dari beberapa properti dan metode Vue yang sering digunakan:

Properti/Metode Deskripsi
$data Objek data yang diamati oleh contoh Vue
$el Elemen DOM yang dikelola oleh contoh Vue
$watch Menyaksikan perubahan pada properti contoh Vue
$set Menetapkan properti pada objek, memicu pembaruan tampilan
$nextTick Menunda callback untuk dijalankan setelah siklus pembaruan DOM berikutnya

Ingat, ini hanya beberapa contoh. Vue.js memiliki banyak fitur dan kapabilitas lain yang kita akan jelajahi dalam les lesi berikutnya.

Saya harap pengenalan ini tentang contoh Vue telah membantu! Ingat, belajar pemrograman seperti belajar bahasa baru - itu memerlukan waktu dan latihan. Jangan frustasi jika Anda belum mengerti segala sesuatu sekarang. Terus mencoba, terus mengode, dan terutama, terus bersenang-senang! Sampai jumpa di les berikutnya!

Credits: Image by storyset

Tutorial Sebelumnya:
VueJS - Pengenalan
Tutorial Seterusnya:
VueJS - Template