v-on 이벤트관련 디렉티브

이벤트 관련 처리는 v-on로

v-on 디렉티브로 이벤트 관련처리를 할 수 있다. v-on은 @으로 대체 가능하다

	const counter = ref(0);
    
    <div>
    	<button @click="counter++">counter {{ counter }}</button>
    </div>

v-on 디렉티브에 메소드를 바인딩할 수 있다. 이때 매개변수로 명시적으로 선언하지 않아도 event 객체를 받는다.

	const printFn = (event) => {
    	console.log(event.target); // <button>click hear</button>
        console.log(event.target.tagName); // BUTTON
    }
    
    <div>
    	<button @click="printFn">click hear</button>
    </div>

이벤트 핸들러에 매개변수를 전달할 수 있다. 이때 이벤트 객체에 접근하기 위해서는 $event 키워드를 사용한다.

	const printFn = (message, event) => {
    	console.log('message: ', message);
        console.log(event.target);
        console.log(event.target.tagName);
    }
    
    <button @click="printFn('hello vue3', $event)">click hear!</button>

v-on이 제공하는 이벤트 수식어

• .stop = event.stopPropagation()
• .prevent = e.preventDefault()
• .capture : 이벤트 캡처링 모드를 활성화 한다.
• .self : 오로지 자기 자신만을 호출할 수 있다.
• .once : 해당 이벤트는 한번만 실행한다.
• .passive : 일반적으로 모바일 장치의 성능을 개선하기 위해 터치 이벤트 리스너와 함께 사용된다. (ex. <div @scroll.passive="onScroll"></ div>)

키보드 관련 수식어

• .enter
• .tab
• .delete (”Delete”와 “Backspace” 키 모두를 수신한다.)
• .esc
• .space
• .up
• .down
• .left
• .right

시스템 키 수식어

다음의 수식어 키가 눌러진 경우에만 마우스 또는 키보드 이벤트 리스너를 실행시킬 수 있다.

• .ctrl
• .alt
• .shift
• .meta (Mac에서 meta는 command key, Window에서 meta는 윈도우키, 특정 키보드에서는 조금 다를 수 있음)

	<!-- 알트 + 엔터 -->
	<input @keyup.alt.enter="clearFn" />
    
    <!-- 컨트롤 + 엔터 -->
	<input @keyup.ctrl.enter="clearFn" />
    
    <!-- 컨트롤 + 클릭 -->
	<div @click.ctrl="clearFn">Do Something</div>

.exact 수식어 -> 정확한 조합이 눌러져야 실행되는 수식어

	<!-- 아래 코드는 Alt 또는 Shift와 함께 눌렀을 때도 실행된다.-->
    <button @click.ctrl="onClickFn">click hear</button>
    
    <!-- 아래 코드는 Ctrl키만 눌러져 있을 때 실행된다.-->
    <button @click.ctrl.exact="onClickFn">click hear</button>
    
    <!-- 아래 코드는 시스템 키가 눌리지 않은 상태인 경우에만 실행된다.-->
    <button @click.exact="onClickFn">click hear</button>