Tutoriel de démarrage de VUE3 : liaison de données et gestion des événements-Voir.js-php.cn

Tutoriel de démarrage de VUE3 : liaison de données et gestion des événements

WBOY

Libérer： 2023-06-15 22:18:14

original

3475 Les gens l'ont consulté

VUE3 est une bibliothèque d'interface utilisateur basée sur le framework JavaScript et largement utilisée dans le développement front-end. Cet article présentera la liaison de données VUE3 et le traitement des événements pour les débutants.

1. Liaison de données

La liaison de données est la fonction la plus importante de VUE3, qui est utilisée pour lier les données à la page afin que les modifications des données puissent être synchronisées sur la page. . VUE3 adopte le modèle de développement MVVM (Model-View-ViewModel), qui peut lier de manière bidirectionnelle les données et les vues du modèle pour réaliser la synchronisation des données. Dans le développement réel, nous devons lier les données aux attributs des balises HTML, telles que innerHTML.

Ce qui suit est un exemple simple de liaison de données :

<!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>

Copier après la connexion

Dans le code ci-dessus, nous avons d'abord introduit le fichier JavaScript VUE3, puis avons défini un identifiant comme div "app", les données sont liées à une balise p via "{{ message }}". Ensuite, nous avons défini une instance de Vue et défini un attribut de message dans data, dont la valeur initiale est "Bonjour, Vue3 !". Enfin, nous avons monté l'instance Vue sur le div avec l'ID "app" via la fonction app.mount. De cette façon, lorsque nos données changent, le contenu de la balise p changera également.

2. Traitement des événements

Le traitement des événements dans VUE3 est similaire à d'autres frameworks JavaScript, et les événements sont liés via l'instruction v-on. Par exemple, nous pouvons lier un événement de clic au bouton :

<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>

Copier après la connexion

Dans le code ci-dessus, nous définissons un div avec l'identifiant "app" et lions un clic via la directive v-on:click Event , lorsque l'utilisateur clique sur le bouton, la fonction handleClick sera déclenchée et une boîte de dialogue apparaîtra.

En plus des événements de clic, VUE3 prend également en charge de nombreux autres événements, tels que :

input : événement de saisie de zone de texte
submit : événement de soumission de formulaire
keyup, keydown : événement clavier
mouseover, mouseout : événement souris
...

Dans le développement réel, nous pouvons écrire la fonction de gestion des événements dans l'attribut méthodes de l'instance Vue, comme indiqué dans le code ci-dessus.

3. Résumé

Grâce à l'introduction de cet article, nous connaissons le mécanisme de liaison de données et de traitement des événements de VUE3. Après avoir maîtrisé ces deux mécanismes, nous pouvons commencer à développer le vôtre. application. Dans le prochain article, nous continuerons à présenter d'autres fonctionnalités de VUE3.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!