vue.js 이벤트 프로세서 가 무엇 입 니까?
v-on 명령 으로 DOM 이 벤트 를 감청 하여 javascript 코드 를 촉발 할 수 있 습 니 다.
demo:
<div v-on:click="++counter"> ， 1</div>
<span>{{counter}}</span>
data:{
counter:0
}
많은 이벤트 프로세서 의 논리 가 매우 복잡 하기 때문에 자바 script 코드 를 v-on 명령 에 직접 쓰 는 것 은 불가능 합 니 다.따라서 v-on 은 정 의 된 방법 을 받 아들 여 호출 할 수 있다.
<div v-on:click="counter()"> ， 1</div>
<span>{{counter}}</span>
data:{
counter:0
},
method:{
counter:function(){
this.counter++;
}
}
$이벤트 네 이 티 브 이벤트 대상
이벤트 수정자
이벤트 처리 프로그램 에서 이벤트.preventDefault()나 이벤트.stopPropagagation()을 호출 하 는 것 은 흔 한 수요 입 니 다.비록 우 리 는 methods 에서 이 점 을 쉽게 실현 할 수 있 지만,더욱 좋다.
방식 은 methods 는 단순히 데이터 논리 일 뿐 DOM 이벤트 의 세부 사항 을 처리 하 는 것 이 아 닙 니 다.
이 문 제 를 해결 하기 위해 Vue.js 는 v-on 에 이벤트 수식 자 를 제공 하고(.)표 시 된 명령 접 두 사 를 통 해 수식 자 를 호출 합 니 다.
.stop
.prevent
.capture
.self
.once
<!-- -->
<a v-on:click.stop="doThis"></a>
<!-- -->
<form v-on:submit.prevent="onSubmit"></form>
<!-- -->
<a v-on:click.stop.prevent="doThat"></a>
<!-- -->
<form v-on:submit.prevent></form>
<!-- -->
<div v-on:click.capture="doThis">...</div>
<!-- （ ） -->
<div v-on:click.self="doThat">...</div>
<!-- -->
<a v-on:click.once="dothis"></a>
버튼 수정자
키보드 사건 을 감청 할 때,우 리 는 흔히 볼 수 있 는 키 값 을 감청 해 야 한다.Vue 는 v-on 이 사건 을 감청 할 때 버튼 수정자 를 추가 할 수 있 습 니 다.
<!-- keyCode 13 vm.submit()-->
<input v-on:keyup.13="submit">
<input v-on:keyup.enter="submit">
<input @keyup.enter="submit">
.enter
.tab
.delete
.esc
.space
.up
.down
.left
.right
전역 config.keyCodes 대상 을 통 해 이벤트 수정자 별명 을 사용자 정의 할 수 있 습 니 다.
// v-on:keyup.f1
Vue.config.keyCodes.f1=112
마우스 나 키보드 이벤트 감청 을 다음 수정자 로 열 어 버튼 을 눌 렀 을 때 반응 할 수 있 습 니 다.
.ctrl
.alt
.shift
.meta
메모:시스템 키보드 에 따라 meta 에 대응 하 는 키 가 다 릅 니 다.
왜 HTML 에서 사건 을 감청 합 니까?
너 는 이런 사건 감청 방식 이 관심 사 분리 의 전통 이념 에 위배 된다 는 것 을 알 수 있 을 것 이다.걱정 하지 마 세 요.모든 Vue.js 이벤트 처리 방법 과 표현 식 이 현재 보기 의 ViewModel 에 엄 격 히 연결 되 어 있 기 때문에 유지 에 어려움 을 주지 않 습 니 다.실제로 v-on 을 사용 하면 몇 가지 장점 이 있다.
1 HTML 템 플 릿 을 한 번 훑 어보 면 자 바스 크 립 트 코드 에 대응 하 는 방법 을 쉽게 찾 을 수 있다
2.JavaScript 에서 수 동 으로 이 벤트 를 연결 할 필요 가 없 기 때문에 view Model 코드 는 매우 순수한 논리 일 수 있 고 DOM 과 완전히 결합 하여 테스트 하기 쉽 습 니 다.
3.ViewModel 이 소각 되면 모든 이벤트 프로세서 가 자동 으로 삭 제 됩 니 다.스스로 청소 하 는 방법 에 대해 걱정 할 필요 가 없습니다.
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
[백견불여일타/Vue.js] 4장 - 입력 폼 데이터 가져오기v-model 데이터 입력 select 지난 장에서는 v-bind를 이용해서 HTML 태그 속성 값을 Vue로 다루는 법을 배웠습니다. 이번에는 사용자가 입력한 데이터를 Vue로 가져오는 법에 대해 다룹니다. 웹 페...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
