VUE3-Erste-Schritte-Tutorial: Datenbindung und Ereignisbehandlung-View.js-php.cn

VUE3-Erste-Schritte-Tutorial: Datenbindung und Ereignisbehandlung

WBOY

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

Original

3479 Leute haben es durchsucht

VUE3 ist eine UI-Bibliothek, die auf einem JavaScript-Framework basiert und häufig in der Front-End-Entwicklung verwendet wird. In diesem Artikel wird die VUE3-Datenbindung und Ereignisverarbeitung für Anfänger vorgestellt.

1. Datenbindung

Die Datenbindung ist die wichtigste Funktion in VUE3, die zum Binden von Daten an die Seite verwendet wird, damit Datenänderungen mit der Seite synchronisiert werden können. VUE3 übernimmt das MVVM-Entwicklungsmodell (Model-View-ViewModel), das Modelldaten und -ansichten bidirektional binden kann, um eine Datensynchronisierung zu erreichen. In der tatsächlichen Entwicklung müssen wir Daten an Attribute von HTML-Tags wie innerHTML binden.

Das Folgende ist ein einfaches Beispiel für die Datenbindung:

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

Nach dem Login kopieren

Im obigen Code haben wir zuerst die JavaScript-Datei von VUE3 eingeführt, dann ein Div mit der ID „app“ definiert und „{{ message }}“ übergeben. Die Daten sind an ein p-Tag gebunden. Als nächstes haben wir eine Vue-Instanz definiert und ein Nachrichtenattribut in Daten definiert, dessen Anfangswert „Hallo, Vue3!“ ist. Schließlich haben wir die Vue-Instanz über die Funktion app.mount an das Div mit der ID „app“ gemountet. Wenn sich unsere Daten ändern, ändert sich auf diese Weise auch der Inhalt des p-Tags.

2. Ereignisverarbeitung

Die Ereignisverarbeitung in VUE3 ähnelt anderen JavaScript-Frameworks und Ereignisse werden über die V-ON-Anweisung gebunden. Zum Beispiel können wir ein Klickereignis an die Schaltfläche binden:

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

Nach dem Login kopieren

Im obigen Code definieren wir ein Div mit der ID „app“ und binden ein Klickereignis über die v-on:click-Direktive, wenn der Benutzer auf klickt button Wenn , wird die handleClick-Funktion ausgelöst und ein Eingabeaufforderungsfeld wird angezeigt.

Neben Klickereignissen unterstützt VUE3 auch viele andere Ereignisse, wie zum Beispiel:

Eingabe: Textfeld-Eingabeereignis
Submit: Formularübermittlungsereignis
Keyup, KeyDown: Tastaturereignis
Mouseover, Mouseout: Mausereignis
...

In der tatsächlichen Entwicklung können wir die Ereignisbehandlungsfunktion in das Methodenattribut der Vue-Instanz schreiben, wie im obigen Code gezeigt.

3. Zusammenfassung

Durch die Einführung dieses Artikels kennen wir die Datenbindungs- und Ereignisverarbeitungsmechanismen von VUE3. Nachdem wir diese beiden Mechanismen beherrscht haben, können wir mit der Entwicklung unserer eigenen Anwendungen beginnen. Im nächsten Artikel werden wir weitere Funktionen von VUE3 vorstellen.

Das obige ist der detaillierte Inhalt vonVUE3-Erste-Schritte-Tutorial: Datenbindung und Ereignisbehandlung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!