Szukaj…


Wprowadzenie

Istnieje kilka często używanych operacji, takich jak event.preventDefault() lub event.stopPropagation() wewnątrz procedur obsługi zdarzeń. Chociaż możemy to zrobić z łatwością w ramach metod, byłoby lepiej, gdyby metody te dotyczyły wyłącznie logiki danych, zamiast zajmować się szczegółami zdarzeń DOM.

Modyfikatory zdarzeń

Vue zapewnia modyfikatory zdarzeń dla v-on , wywołując postfiksy dyrektywy oznaczone kropką.

  • .stop
  • .prevent
  • .capture
  • .self
  • .once

Dla przykładów:

<!-- the click event's propagation will be stopped -->
<a v-on:click.stop="doThis"></a>

<!-- the submit event will no longer reload the page -->
<form v-on:submit.prevent="onSubmit"></form>

<!-- use capture mode when adding the event listener -->
<div v-on:click.capture="doThis">...</div>

<!-- only trigger handler if event.target is the element itself -->
<!-- i.e. not from a child element -->
<div v-on:click.self="doThat">...</div>

Kluczowe modyfikatory

Podczas nasłuchiwania zdarzeń na klawiaturze często musimy sprawdzać, czy nie występują wspólne kody klawiszy. Zapamiętywanie wszystkich kodów jest kłopotliwe, więc Vue zapewnia aliasy dla najczęściej używanych kluczy:

  • .enter
  • .tab
  • .delete (przechwytuje zarówno klawisze „Usuń”, jak i „Backspace”)
  • .esc
  • .space
  • .up
  • .down
  • .left
  • .right

Dla przykładów:

<input v-on:keyup.enter="submit">

Modyfikatory wejściowe

  • .trim

Jeśli chcesz, aby dane wejściowe użytkownika były przycinane automatycznie, możesz dodać modyfikator trim do danych zarządzanych przez v-model :

<input v-model.trim="msg">
  • .number

Jeśli chcesz, aby dane wprowadzane przez użytkownika były automatycznie wybierane jako typ liczby, możesz wykonać następujące czynności:

<input v-model.number="age" type="number">
  • .lazy

Zasadniczo v-model synchronizuje dane wejściowe z danymi po każdym zdarzeniu wejściowym, ale można dodać lazy modyfikator, aby zamiast tego synchronizować po zdarzeniu zmiany:

<input v-model.lazy="msg" >


Modified text is an extract of the original Stack Overflow Documentation
Licencjonowany na podstawie CC BY-SA 3.0
Nie związany z Stack Overflow