Rumah > Artikel > hujung hadapan web > Bagaimana untuk membuat instantiate Vue dalam halaman HTML
Bagaimana untuk membuat instantiate Vue dalam halaman HTML
- PHPzasal
- 2023-04-26 16:13:33757semak imbas
Vue ialah rangka kerja JavaScript yang popular untuk mencipta aplikasi web dinamik. Vue mempunyai API yang mudah dipelajari dan digunakan serta boleh dibenamkan dengan mudah ke dalam halaman HTML sedia ada. Dalam artikel ini, kami akan menumpukan pada cara membuat instantiate Vue dalam halaman HTML.
Vue.js ialah rangka kerja JavaScript ringan yang boleh dibenamkan dengan mudah ke dalam halaman HTML. Untuk membuat seketika Vue, kita perlu mentakrifkan tika Vue seperti ini:
new Vue({
// options
})
Di sini, kami membuat instantiat Vue dengan menghantar objek pilihan. Objek pilihan mengandungi pelbagai tetapan dan konfigurasi untuk aplikasi Vue.
Untuk membenamkan Vue dalam halaman HTML, muat turun fail Vue.js dan masukkannya dalam dokumen HTML. Anda boleh menggunakan CDN (Rangkaian Penghantaran Kandungan) atau memuat turun perpustakaan Vue.js dan menyimpannya pada pelayan anda. Berikut ialah contoh menggunakan CDN untuk memasukkan Vue:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Vue Example</title>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
{{ message }}
</div>
<script>
new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
});
</script>
</body>
</html>
Dalam contoh di atas, kami menggunakan CDN Vue.js untuk memasukkan Vue dalam dokumen HTML kami. Kami kemudian mentakrifkan elemen HTML dengan id "aplikasi", melampirkan tika Vue pada elemen dan mentakrifkan atribut yang dipanggil "mesej" dalam pilihan data tika Vue.
Dalam pilihan "el" contoh Vue, kami memberitahu Vue bahawa kami ingin melampirkan aplikasi Vue pada elemen HTML dengan id "aplikasi". Dengan cara ini, Vue akan mencari elemen dalam halaman HTML dan menggunakan enjin templat Vue untuk memaparkannya.
Dalam pilihan data contoh Vue, kami mentakrifkan sifat bernama "message" dan menetapkan nilai awalnya kepada "Hello Vue!". Menggunakan sintaks kurungan berganda ({{ mesej }}), kita boleh memasukkan atribut ke dalam dokumen HTML.
Dengan langkah mudah ini, kami boleh membuat instantiate dan membenamkan Vue ke dalam halaman HTML. Kemudahan penggunaan dan fleksibiliti Vue menjadikannya pilihan terbaik untuk mencipta aplikasi web interaktif.
Atas ialah kandungan terperinci Bagaimana untuk membuat instantiate Vue dalam halaman HTML. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!