Vue.js
수정 자

소개

이벤트 수정 자

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