Vue.js
수정 자
수색…
소개
이벤트 핸들러에는 event.preventDefault()
또는 event.stopPropagation()
과 같이 자주 사용되는 조작이 있습니다. 메소드 내에서 쉽게이 작업을 수행 할 수 있지만, DOM 이벤트 세부 사항을 처리하지 않고 데이터 로직에 대한 메소드 만 사용할 수 있다면 더 좋습니다.
이벤트 수정 자
Vue는 점으로 표시된 지시문 접미사를 호출하여 v-on
에 대한 이벤트 수정자를 제공합니다.
-
.stop
-
.prevent
-
.capture
-
.self
-
.once
예를 들어:
<!-- 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>
키 수정 자
키보드 이벤트를 청취 할 때 종종 공통 키 코드를 확인해야합니다. 모든 keyCode를 기억하는 것은 번거롭기 때문에 Vue는 가장 일반적으로 사용되는 키의 별칭을 제공합니다.
-
.enter
-
.tab
-
.delete
( "삭제"및 "백 스페이스"키 캡처) -
.esc
-
.space
-
.up
-
.down
-
.left
-
.right
예를 들어:
<input v-on:keyup.enter="submit">
입력 수정 자
-
.trim
사용자 입력을 자동으로 트리밍하려는 경우 trim
수정자를 v-model
관리 입력에 추가 할 수 있습니다.
<input v-model.trim="msg">
-
.number
사용자 입력이 숫자로 자동 변환되도록하려면 다음과 같이하면됩니다.
<input v-model.number="age" type="number">
-
.lazy
일반적으로 v-model
은 각 입력 이벤트 이후에 입력과 데이터를 동기화하지만 변경 이벤트 이후에 lazy
수정자를 대신 동기화 할 수 있습니다.
<input v-model.lazy="msg" >
Modified text is an extract of the original Stack Overflow Documentation
아래 라이선스 CC BY-SA 3.0
와 제휴하지 않음 Stack Overflow