Tutorial Bermula VUE3: Pengikatan Data dan Pengendalian Acara-View.js-php.cn

Tutorial Bermula VUE3: Pengikatan Data dan Pengendalian Acara

WBOY

Lepaskan： 2023-06-15 22:18:14

asal

3474 orang telah melayarinya

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>

Salin selepas log masuk

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>

Salin selepas log masuk

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!