WEB/Vue.js
[Vue.js][기본 문법] 4. Event Handling
bay07
2024. 4. 30. 09:34
▶ v-on
DOM 요소에 이벤트 리스너를 연결하고 수신한다  |
| handler의 종류 1. Inline handlers : 이벤트가 트리거 될 때 실행되는 JavaScript 코드 2. Method handlers : 컴포넌트에 정의된 매서드 이름 |
| v-on shorthand 약어 @  |
▶ Inline handlers
Inline handlers는 주로 간단한 상황에 사용한다  |
| - Inline handler에서의 메서드 호출 메서드 이름에 직접 연결하는 대신 Inline Handlers에서 메서드를 호출할 수도 있다. 이렇게 하면 기본 이벤트 대신 사용자 지정 인자를 전달할 수 있다.  |
| - Inline Handlers에서의 event 인자에 접근하기 Inline Handlers에서 원래 DOM 이벤트에 접근하기 $ event 변수를 사용하여 메서드에 전달한다  |
▶ Method handlers
Inline handlers 로는 불가능한 대부분의 상황에서 사용한다   |
| Method Handlers는 이를 트리거하는 기본 DOM Event 객체를 자동으로 수신한다  |
▶ Event Modifiers
| Vue는 v-on에 대한 Event Modifiers를 제공한다. 그래서 event.preventDefault()와 같은 구문을 메서드에서 작성하지 않도록 한다. stop, prevent, self 등 다양한 modifiers를 제공한다. |
| 메서드를 사용할 때는, DOM 이벤트에 대한 처리보다는 데이터에 관한 논리를 작성하는 것에 집중하자  * Modifiers는 chained 되게끔 작성할 수 있으며, 이때는 작성된 순서대로 실행하기 때문에 작성 순서에 유의해야한다. |
▶ Key Modifiers
| Vue는 키보드 이벤트를 수신할 때 특정 키에 관한 별도의 modifiers를 사용할 수 있다. |
key가 Enter일 때만 onSubmit 이벤트를 호출한다.  |
* 참고