Rumah >hujung hadapan web >View.js >Tutorial Bermula VUE3: Pengikatan Data dan Pengendalian Acara
Tutorial Bermula VUE3: Pengikatan Data dan Pengendalian Acara
- WBOYasal
- 2023-06-15 22:18:143480semak imbas
VUE3 ialah perpustakaan UI berdasarkan rangka kerja JavaScript dan digunakan secara meluas dalam pembangunan bahagian hadapan. Artikel ini akan memperkenalkan pengikatan data dan pemprosesan acara VUE3 untuk pemula.
1. Pengikatan data
Pengikatan data ialah fungsi yang paling penting dalam VUE3, yang digunakan untuk mengikat data ke halaman supaya perubahan data boleh disegerakkan ke halaman. VUE3 mengguna pakai model pembangunan MVVM (Model-View-ViewModel), yang boleh mengikat data model dan pandangan dua hala untuk mencapai penyegerakan data. Dalam pembangunan sebenar, kita perlu mengikat data kepada atribut tag HTML, seperti innerHTML.
Berikut ialah contoh pengikatan data mudah:
<!DOCTYPE html>
<html>
<head>
<title>VUE3数据绑定示例</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="app">
<p>{{ message }}</p>
</div>
<script>
const app = Vue.createApp({
data() {
return {
message: 'Hello, Vue3!'
}
}
})
app.mount('#app')
</script>
</body>
</html>Dalam kod di atas, kami mula-mula memperkenalkan fail JavaScript VUE3, dan kemudian menentukan div dengan id "apl", melalui "{{ mesej }}" mengikat data pada teg p. Seterusnya, kami mentakrifkan tika Vue dan menentukan atribut mesej dalam data, yang nilai awalnya ialah "Hello, Vue3!". Akhir sekali, kami memasang contoh Vue pada div dengan "aplikasi" ID melalui fungsi app.mount. Dengan cara ini, apabila data kita berubah, kandungan dalam tag p juga akan berubah.
2. Pemprosesan acara
Pemprosesan acara dalam VUE3 adalah serupa dengan rangka kerja JavaScript lain dan acara terikat melalui arahan v-on. Contohnya, kami boleh mengikat acara klik pada butang:
<div id="app">
<button v-on:click="handleClick">Click me</button>
</div>
<script>
const app = Vue.createApp({
methods: {
handleClick() {
alert('You clicked me!')
}
}
})
app.mount('#app')
</script>Dalam kod di atas, kami mentakrifkan div dengan id "app" dan mengikat acara klik melalui arahan v-on:click When pengguna mengklik butang, fungsi handleClick akan dicetuskan dan kotak gesaan akan muncul.
Selain acara klik, VUE3 juga menyokong banyak acara lain, seperti:
- input: acara input kotak teks
- serahkan: acara penyerahan borang
- keyup, keydown: acara papan kekunci
- mouseover, mouseout: acara tetikus
- ...
Dalam pembangunan sebenar, kita boleh menulis fungsi pemprosesan acara Dalam atribut kaedah bagi contoh Vue, seperti yang ditunjukkan dalam kod di atas.
3. Ringkasan
Melalui pengenalan artikel ini, kami mengetahui mekanisme penjilidan data dan peristiwa VUE3 Selepas menguasai kedua-dua mekanisme ini, kami boleh mula membangunkan aplikasi kami sendiri . Dalam artikel seterusnya, kami akan terus memperkenalkan ciri lain VUE3.
Atas ialah kandungan terperinci Tutorial Bermula VUE3: Pengikatan Data dan Pengendalian Acara. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!