Indonesia

Tutorial VueJS

VueJS -Instances

Hai teman-teman pengembang web yang sedang belajar! Hari ini, kita akan masuk ke dunia yang menakjubkan dari instance Vue.js. Jangan khawatir jika Anda baru dalam pemrograman - saya akan memandu Anda langkah demi langkah, seperti yang telah saya lakukan untuk ribuan murid selama tahun-tahun mengajar. Jadi, ambil secangkir kopi (atau teh, jika itu yang Anda suka), dan mari kita mulai!

VueJS - Instances

Apa Itu Vue Instance?

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

Sintaks

Membuat instance Vue cukup mudah. Ini adalah sintaks dasar:

new Vue({
// options
})

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

Instance Vue Pertama Anda

Mari kita buat instance Vue pertama kita bersama. Jangan khawatir jika Anda belum mengerti segala sesuatu segera - kita akan membongkar hal itu piece by piece.

Contoh 1

<!DOCTYPE html>
<html>
<head>
<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

Hello, Vue!

Sekarang, mari kitauraikan ini:

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

Ketika Vue melihat {{ message }} di HTML kita, dia menggantinya dengan nilai message dari data kita. Magic, kan?

Data dan Metode

Instance 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>Vue Methods Example</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

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

Dalam contoh ini:

  1. Kita menambahkan tombol dengan v-on:click="reverseMessage". Ini memberitahu Vue untuk memanggil metode reverseMessage ketika tombol diklik.
  2. Dalam instance Vue kita, kita menambahkan objek methods dengan fungsi reverseMessage.
  3. Fungsi tersebut memecah pesan menjadi array karakter, membaliknya, dan menggabungkannya kembali menjadi string.
  4. Kita gunakan this.message untuk mengakses dan mengubah properti data message.

Hooks Lifecycle

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

Contoh

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

<script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello, Vue!'
},
created: function() {
console.log('Instance Vue diciptakan!')
},
mounted: function() {
console.log('Instance Vue dimountkan ke DOM!')
this.message = 'Welcome to Vue!'
}
})
</script>
</body>
</html>

Output

Dalam browser, Anda akan melihat "Welcome to Vue!". Dalam console, Anda akan melihat dua pesan:

Instance Vue diciptakan!
Instance Vue dimountkan ke DOM!

Ini adalah apa yang terjadi:

  1. Hook created berjalan ketika instance Vue diciptakan. Kita mencatat pesan ke console.
  2. Hook mounted berjalan ketika instance Vue dimountkan ke DOM. Kita mencatat pesan lain dan mengubah properti data message.

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

Properti dan Metode Instance Vue

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

Contoh

<!DOCTYPE html>
<html>
<head>
<title>Vue Instance Properties and 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="updateMessage">Update Message</button>
</div>

<script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello, Vue!'
},
methods: {
updateMessage: function() {
this.$data.message = 'Message updated!'
console.log(this.$el)
this.$nextTick(function() {
console.log('DOM updated!')
})
}
}
})

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 mencatat elemen root DOM instance Vue.
  3. Kita menggunakan this.$nextTick untuk menjalankan fungsi setelah DOM diperbarui.
  4. Di luar instance Vue, kita dapat mengakses propertinya menggunakan app.$data.

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

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

Ingat, ini hanya beberapa contoh. Vue.js memiliki banyak fitur dan kapabilitas lainnya yang kita akan jelajahi di lesyon berikutnya.

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

Credits: Image by storyset

Tutorial Sebelumnya:
VueJS - Pengenalan
Tutorial Selanjutnya:
VueJS - Template