Memulai Dengan Vue.js: Memahami Objek Opsi
Table of content:
Vue.js telah mendapatkan reputasinya sebagai framework JavaScript progresif. Anda dapat menggunakan Vue.js untuk membangun aplikasi satu halaman (SPA) atau mengembangkan antarmuka pengguna tertentu.
Di sini Anda akan mempelajari dasar-dasar Vue.js, termasuk cara membuat komponen Vue dan bekerja dengan objek opsi untuk merender data dinamis.
Termasuk Vue Melalui Tautan CDN
Vue.js adalah salah satu framework JavaScript paling populer. Untuk memulai dengan Vue, dan untuk menambahkannya ke halaman HTML Anda, salin tag skrip di bawah ini dan tempelkan ke bagian kepala:
Baca Juga:
<script src="<https://unpkg.com/vue@3/dist/vue.global.js>"></script>
Menggunakan tautan CDN adalah opsi yang sangat baik untuk meningkatkan HTML statis atau menambahkan fungsionalitas ke aplikasi Anda.
Namun, Anda perlu menginstal Vue.js melalui npm untuk menggunakan lebih banyak fitur lanjutannya, seperti sintaks Single-File Component (SFC), yang berguna saat membangun aplikasi Vue yang lengkap.
Membuat Aplikasi Vue
Mengakses pustaka Vue melalui tautan CDN menyediakan objek Vue, termasuk .createApp() metode.
Sesuai dengan namanya, Anda dapat membuat aplikasi Vue menggunakan metode ini.
Misalnya:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Vue app</title>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
<script>
const app = Vue.createApp();
</script>
</body>
</html>
Di sini aplikasi yang dibuat disimpan di aplikasi variabel. Setelah membuat instance aplikasi, Anda harus merendernya menggunakan .gunung() metode. Metode ini memberi tahu tempat memasang aplikasi di Document Object Model (DOM).
Seperti itu:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Vue app</title>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
<div id="app"></div>
<script>
const app = Vue.createApp();
app.mount("#app");
</script>
</body>
</html>
Untuk menggunakan Vue .gunung() metode, Anda harus memberikan elemen atau pemilih DOM sebagai argumen. Dalam contoh ini, kami memasang aplikasi Vue menggunakan elemen DOM dengan #aplikasi PENGENAL.
Penting untuk diperhatikan bahwa aplikasi Vue hanya mengontrol elemen yang ditentukan menggunakan an pengenal. Selain itu, aplikasi tidak memiliki kendali atas apa pun di luar elemen tersebut, termasuk peristiwa klik atau interaktivitas lainnya.
Langkah terakhir dalam membuat aplikasi Vue adalah memanggil .gunung() metode setelah menyelesaikan semua konfigurasi aplikasi.
Objek Opsi di Vue
Di Vue.js, Anda menggunakan Pilihan objek sebagai objek konfigurasi untuk membuat instance atau komponen Vue.
Ini adalah bagian penting dari aplikasi Vue karena mendefinisikan perilaku dan data untuk setiap instance atau komponen. Itu Pilihan objek terdiri dari beberapa properti yang mewakili berbagai aspek dari instance atau komponen.
Beberapa properti yang umum digunakan dalam Pilihan objek adalah:
- data: Properti ini mendefinisikan objek data untuk aplikasi Vue. Ini adalah fungsi yang mengembalikan objek yang berisi properti data dan nilai awalnya.
- metode: The metode properti objek Opsi memegang fungsi vital dalam mengaktifkan rendering dinamis.
- templat: Properti ini mendefinisikan template HTML untuk instance atau komponen Vue. Ini adalah string yang berisi markup HTML, yang dapat diuraikan oleh kompiler template Vue.
Perhatikan bahwa saat menggunakan properti template, kompiler Vue hanya akan merender konten yang ditentukan dalam template.
Berikut adalah contoh aplikasi Vue dengan data, metode, Dan templat properti:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Vue app</title>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
<div id="app">
<h1 @click="reverseMessage" >{{ text }}</h1>
</div>
<script>
const app = Vue.createApp({
data() {
return {
text: "This is your Vue App"
};
},
methods: {
reverseMessage () {
this.text = this.text.split('').reverse().join('')
}
}
});
app.mount("#app");
</script>
</body>
</html>
Program ini menggambarkan aplikasi Vue dasar yang menampilkan teks “Ini adalah Aplikasi Vue Anda” menggunakan interpolasi teks dan memungkinkan pengguna mengkliknya untuk membalikkan pesan.
Itu data() fungsi mengembalikan objek dengan satu properti yang disebut teks. Itu @klik direktif digunakan untuk melampirkan a pesan balik() metode ke
elemen, yang membalikkan teks Properti.
Saat menjalankan program ini, aplikasi Vue yang dibuat akan terlihat seperti ini:
Mengklik teks akan membalikkannya.
Perhatikan bahwa program mengomentari properti template untuk memungkinkan konten di aplikasi Vue dirender. Jika dibiarkan tanpa komentar, aplikasi Vue ini hanya akan menampilkan properti template:
Ada properti lain seperti Atribut Dan dihitungyang juga dapat Anda manfaatkan untuk membuat aplikasi Vue yang kuat dan fleksibel saat mengonfigurasi Objek Opsi.
Interpolasi Teks di Vue
Interpolasi teks di Vue adalah fitur yang memungkinkan Anda mengikat data ke elemen HTML secara dinamis. Dengan kata lain, ini akan memungkinkan Anda untuk secara langsung menampilkan nilai properti data instance Vue di HTML.
Untuk mencapai interpolasi teks di Vue, Anda perlu membungkus nama properti data dalam kurung kurawal ganda. Vue menafsirkan konten di dalam kurung kurawal ganda sebagai ekspresi JavaScript, dan selanjutnya menggantikannya dengan nilai yang dihasilkan.
Misalnya:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Vue app</title>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
<div id="app">
<h1>{{ message }}</h1>
<p>Welcome {{ name }}</p>
</div>
<script>
const app = Vue.createApp({
data() {
return {
message: "This is your Vue app.",
name: "Noble",
};
},
});
app.mount("#app");
</script>
</body>
</html>
Dalam contoh ini, interpolasi teks mengikat pesan Dan nama properti dari objek data yang dikembalikan dalam instance Vue ke
Dan elemen. Setelah aplikasi Vue dipasang, ini akan menampilkan nilai dari pesan Dan nama properti dalam HTML pada posisinya masing-masing.
Anda juga dapat menampilkan hasil pemanggilan metode atau melakukan operasi dasar JavaScript di dalam tanda kurung kurawal ganda:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Vue app</title>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
<div id="app">
<h1>{{ message }}</h1>
<h3>Welcome {{ name.toUpperCase() }}</h3>
<p>There are {{ nameLength() }} letters in your name.</p>
</div>
<p>not here</p>
<script>
const app = Vue.createApp({
data() {
return {
message: "This is your Vue App",
name: "Noble Okafor",
};
},
methods: {
nameLength() {
return this.name.length - 1;
},
},
});
app.mount("#app");
</script>
</body>
</html>
Dalam contoh ini, aplikasi Vue memiliki data objek yang berisi dua properti: pesan Dan nama.
Di dalam aplikasi Vue, ketiga elemen HTML menampilkan data menggunakan instance Vue. Itu h1 elemen menampilkan nilai dari pesan properti, sedangkan h3 elemen menampilkan nilai dari nama properti dengan a toUpperCase() metode yang diterapkan padanya.
Itu P elemen menampilkan hasil yang dikembalikan dari namaPanjang() metode yang ditentukan dalam metode objek aplikasi Vue. Itu namaPanjang() metode mengembalikan panjang nama properti dikurangi satu.
Untuk mengakses nilai dari objek data di objek metode, Anda perlu menggunakan ini kata kunci. ini kata kunci mengacu pada instance Vue saat ini dan memungkinkan Anda untuk mengakses properti dan metodenya dari dalam instance Vue. Dengan menggunakan iniAnda dapat mengambil nilai dari nama properti dan melakukan manipulasi yang diperlukan di atasnya menggunakan metode.
Aplikasi Vue ini mendemonstrasikan cara mengikat data ke elemen HTML menggunakan interpolasi teks dan cara mendefinisikan dan memanggil metode dalam instance Vue.
Bangun Front-End Anda Menggunakan Vue
Dalam artikel ini, Anda belajar cara mulai bekerja dengan Vue dan menginterpolasi teks dengan sintaks template Vue. Anda dapat mengakses beberapa fitur lain di Vue, seperti directives dan lifecycle hooks, menjadikannya pilihan yang sangat baik untuk membangun aplikasi front-end yang dinamis.
Artikel Terkait
