Vue.js 입문 수업 05 이벤트 제어

Vue.js 입문
이벤트 제어
( v-on 디렉티브 )

이벤트 제어의 특징
easy

v-on 디렉티브
이벤트 등록 역할
약어(Shorthand)로 @사용 가능

v-on 사용 방법
v-on뒤에 :을 사용하여 html의 이벤트 관련 속성 지정
html 속성 중 접두어 on을 사용하는 이벤트명을 사용
사용 가능한 이벤트 목록

v-on 사용의 예
<div id="app">
<h1>{{ value }}</h1>
<button v-on:click=' setValue("왼쪽") '>클릭!</button>
<button @click=' setValue("오른쪽") '>클릭!</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data: { value: "클릭해 보세요" },
methods: {
setValue: function(str){
this.value = str + " 클릭";
}
}
});
</script>

이벤트 관리는 vue.js가!
v-on 디렉티브를 사용한
이벤트의 해제는 vue.js가 관리 합니다.

동적인 화면에서 이벤트 처리?

수식어 (Modifier)
이벤트 처리를 더욱 손쉽게 도와주는 역할
종류 : 키보드, 마우스, 기타

수식어 사용 방법
v-on 디렉티브 바로 뒤에 .(수식어명)을 이용해 사용

수식어 사용의 예
<div id="app">
<h1>{{ value }}</h1>
<input id="INPUT" type="text" @keyUp.enter=' setValue() '/>
</div>
<script>
el: "#app",
data: { value: "value" },
methods: {
setValue: function(){
this.value = document.getElementById("INPUT").value;
}
}
});
</script>

키보드 수식어
수식어 기능
.enter / .tab / .esc / .space 엔터키 / 탭키 / Esc키 / 스페이스
.delete Delete와 Backspace키
.up / .down / .left / .right 상하좌우 방향키
.[키번호] JS의 키번호(KeyCode)를 직접 사용할 수 있음
.ctrl / .alt / .shift [2.1.0이상] 컨트롤키 / 알트키 / 쉬프트키
.meta
[2.1.0이상] 윈도우의 경우 윈도우키,
맥의 경우 command키 등으로 매핑

마우스 수식어
수식어 기능
.left 왼쪽 클릭
.right 오른쪽 클릭
.middle 휠버튼 클릭

수식어의 체이닝
<div id="app">
<h1>{{ value }}</h1>
<input id="INPUT" type="text" @keyUp.shift.enter=' setValue() '/>
</div>
<script>
el: "#app",
methods: {
}
}
});
</script>

특수 수식어 exact
<div id="app">
<h1>{{ value }}</h1>
<input id="INPUT" type="text" @keyUp.shift.enter.exact=' setValue() '/>
</div>
<script>
el: "#app",
methods: {
}
}
});
</script>

이벤트 수식어
수식어 기능
.stop 다른 요소의 이벤트 전파를 방지합니다. (event객체의 stopPropagation()와 동일)
.prevent 기본 이벤트의 진행을 취소합니다. (event객체의 preventDefault()와 동일)
.capture
이벤트를 추가할때 캡텨모드로 추가 됩니다.
(addEventListener()에 useCapture 파라미터를 ture로 설정한 것과 동일합니다.)
.self 요소(태그) 자신의 영역의 이벤트만 처리합니다.
.once [2.1.4 버전 이상] 지정한 이벤트를 한번만 수행하게 설정
.passive
[2.3.0 버전 이상] 기본 이벤트의 진행을 막지않습니다.
(prevent수식어와 반대되는 기능으로 passive와 prevent는 같이 체이닝하면 안됩니다.)
(addEventListener()의 옵션 파라미터의 passive를 ture로 설정한 것과 동일합니다.)

다 외우진 말고…
필요할 때 공식문서참고하기!

Vue.js 입문 수업 05 이벤트 제어

Recommandé

Recommandé

Contenu connexe

Plus de 승빈이네 공작소

Plus de 승빈이네 공작소 (13)

Vue.js 입문 수업 05 이벤트 제어