Vue.js muss jeden Tag und Event -Handler lernen

Methodenprozessor

Sie können den Befehl v-on verwenden, um auf DOM-Ereignisse zu hören:

 <div id = "Beispiel"> <Button V-on: click = "Greet"> Greet </button> </div>

Wir binden einen Klick -Ereignis -Handler an eine Methode Greet. Das Folgende ist die in der VUE -Instanz definierte Methode:

 var vm = new Vue({ el: '#example', data: { name: 'Vue.js' }, // Define methods in the `methods` object: { greet: function (event) { // In the method `this` point to vm alert('Hello ' + this.name + '!') // `event` is a native DOM event alert(event.target.tagName) } }}) // Sie können auch die Methode vm.greet () in JavaScript Code // -> 'Hallo Vue.js!'

Testen Sie es selbst

Inline -Anweisungsprozessor

Zusätzlich zur direkten Bindung an eine Methode können Sie auch Inline -JavaScript -Anweisungen verwenden:

 <div id = "example-2"> <button v-on: klick = "say ('hi')"> Say hi </button> <button v-on: klick = "say ('was')"> Sag was </button> </div>

 New Vue ({El: '#Beispiel-2', Methoden: {Say: Funktion (msg) {alert (msg)}}})

Ähnlich wie bei Inline -Ausdrücken ist der Ereignishandler auf eine Erklärung beschränkt.

Manchmal ist es auch notwendig, auf native DOM -Ereignisse im Inline -Anweisung -Prozessor zuzugreifen. Sie können das spezielle Variable $ -Event verwenden, um es in die Methode zu übergeben:

<Button V-on: click = "Say ('Hallo!', $ event)"> Senden </button>

 // ... Methoden: {Say: Funktion (MSG, Ereignis) {// Jetzt können wir auf das native Ereignisobjekteereignis zugreifen. PreventDefault ()}}

Ereignismodifikator

In Event -Prozessoren Ereignis.PreventDefault () oder Event.StopPropagation () ist häufig erforderlich. Obwohl wir dies in einer Methode leicht tun können, wäre es besser, die Methode reine Datenlogik zu haben, ohne die DOM -Ereignisdetails zu verarbeiten.

Um dieses Problem zu lösen, bietet Vue.js V-on mit zwei Ereignismodifikatoren: .Prevent und .Stop. Erinnerst du dich, dass der Modifikator das Anweisungssuffix ist, das mit dem Punkt beginnt?

 <!-verhindern, dass das klickereignis von sprudel klicke-> <a v-on: click.stop = "dothis"> </a> <!-Sendenereignis überlädt die Seite nicht mehr-> <Formular v-on: submit.prevent = "Onsubmit"> </form> <!-Modifikatoren können überkatener-> <a v-on: klick.stop: v-on: subine.prevent> </form>

1.0.16 fügte zwei zusätzliche Modifikatoren hinzu:

 <!-Nutzen Sie den Capture-Modus, wenn Sie Ereignishörer hinzufügen-> <div V-on: click.capture = "dothis"> ... </div> <!-Der Rückruf wird nur ausgelöst, wenn das Ereignis auf dem Element selbst ausgelöst wird (kein untergeordnetes Element)-> <Div V-On: Click.self = "Dothat"> ... </div>

Schlüsselmodifikator

Beim Hören von Tastaturereignissen müssen wir häufig Schlüsselcode erkennen. Vue.js ermöglicht das Hinzufügen von Schlüsselmodifikatoren zu V-On:

 <!-vm.submit () wird nur aufgerufen, wenn KeyCode 13-> <Eingabe v-on: keyUp.13 = "subieren"> ist

Denken Sie daran, dass alle Schlüsselcodes schwierig sind, Vue.js bietet Alias für die am häufigsten verwendeten Schlüssel:

 <!-gilt wie oben-> <Eingabe v-on: keyUp.enter = "subieren"> <!-Abkürzungssyntax-> <Eingabe @keyUp.enter = "subieren">

Alle wichtigen Alias:

•eingeben

•Tab

•löschen

• Esc

•Raum

•hoch

•runter

•links

•Rechts

1.0.8+: Unterstützt ein Taste-Alias von Einzelhandel.

1.0.17+: Sie können den wichtigsten Alias anpassen:

 // Sie können @keyup.f1vue.directive ('on'). KeyCodes.f1 = 112 verwenden

Warum auf Ereignisse in HTML zuhören?

Möglicherweise haben Sie festgestellt, dass diese Art von Ereignisüberwachungsmethode gegen das traditionelle Konzept der "Besorgnistrennung" verstößt. Machen Sie sich keine Sorgen, denn alle Methoden und Ausdrücke von Vue.js -Ereignisbearbeitungen sind streng an das ViewModel der aktuellen Ansicht gebunden und verursachen keine Wartungsschwierigkeiten. In der Tat haben die Verwendung von V-on mehrere Vorteile:

1. Scannen Sie die HTML -Vorlage und Sie können die entsprechenden Methoden im JavaScript -Code problemlos finden.

2. Da Sie Ereignisse in JavaScript nicht manuell binden müssen, kann Ihr ViewModel -Code eine sehr reine Logik sein, vollständig vom DOM entkoppelt und erleichtert das Testen.

3. Wenn ein ViewModel zerstört wird, werden alle Ereignisprozessoren automatisch gelöscht. Sie müssen sich keine Sorgen machen, wie Sie sie selbst aufräumen können.

Dieser Artikel wurde in das Tutorial "Vue.js Front-End-Komponenten Learning" zusammengestellt, und jeder kann gerne lernen und lesen.

Das obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, es wird für das Lernen aller hilfreich sein und ich hoffe, jeder wird Wulin.com mehr unterstützen.