Vue.js
Modyfikatory
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" >