Vue의 이벤트 처리 분석

이 글은 Vue에서의 이벤트 처리 분석을 공유합니다. 도움이 필요한 친구들이 참고할 수 있습니다.

목표:

1. 이벤트 모니터링에 능숙하고 이벤트 처리 방법 및 다양한 이벤트 수정자에 익숙함

   #🎜🎜 ##🎜 🎜#
html에서 리스닝 이벤트의 의미 이해
리스닝 이벤트(v-on)

#🎜 🎜## 🎜🎜#일반 on과 유사합니다. 예를 들어 v-on:click 또는 @click은 일반 onclick과 동일합니다.

#🎜 🎜##🎜 🎜#v-on은 메소드를 호출할 수 있을 뿐만 아니라 일부 js 표현식도 실행할 수 있습니다
특수 변수 $event DOM 이벤트를 전달하여 요소에 액세스할 수 있습니다 #🎜 🎜#

2. 이벤트 수정자

3. Modifier
.stop // 이벤트 전파 차단

.prevent // 기본 동작 방지

.capture // 이벤트 캡처 모드 사용(먼저 직접 처리한 다음 내부 요소에 넘겨서 다시 처리)

.self // event.target이 현재인 경우 Triggered by 요소 자체(다른 요소로 인해 발생하는 요소는 적용되지 않음)

.once // 한 번만 트리거될 수 있음
1. .passive // ​​​​기본 동작이 즉시 트리거되도록 허용

   #🎜🎜 #
   
   수정자는 이벤트 이름 뒤에 추가되며 연결될 수 있거나 수정자만 가능합니다
   
   
   

   例如: <a href="http://www.baidu.com" @click.prevent.stop>去百度</a>

   
   주요 이벤트 수정자#🎜🎜 #
   1. 키보드 이벤트
@keydown // 키보드 누르기 이벤트
2. @keyup // 키보드 놓기 이벤트
   2. 수정자(키 별칭)
.enter

.tab

.delete("삭제" 및 "백스페이스" 키 캡처)

.esc

.space
.up
.down# 🎜 🎜#.left

.right

또한 전역 config.keyCodes 객체를 통해 키 수정자 별칭을 사용자 정의할 수 있습니다:

// 可以使用 `v-on:keyup.f1`
Vue.config.keyCodes.f1 = 112

3. 조합 수정
.ctrl
.alt
.shift
.meta

 <!-- Alt + C -->
<input @keyup.alt.67="clear">
<!-- Ctrl + Click -->
<p @click.ctrl="doSomething">Do something</p>

HTML에서 이벤트를 수신하는 이유

Essence 모든 Vue.js 이벤트 처리 방법 및 표현식은 현재 뷰의 ViewModel에 엄격하게 바인딩됩니다

v-on을 사용하면 다음과 같은 이점이 있습니다.

#🎜🎜 #편리하게 템플릿에 바인딩된 이벤트를 보고 js 코드에서 해당 메서드를 쉽게 찾을 수 있습니다.

JS로 이벤트를 수동으로 바인딩할 필요가 없으며 DOM에서 분리되어 테스트하기 쉽습니다. #🎜 🎜#

ViewModel이 소멸되면 모든 이벤트 핸들러가 삭제되지 않고 자동으로 삭제됩니다.

1. 관련 권장 사항 :

2. Vue의 클래스 및 스타일 바인딩과 조건부 및 목록 렌더링 분석

3. Vue의 템플릿 구문, 계산된 속성, 청취자 분석

위 내용은 Vue의 이벤트 처리 분석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!