Front-end/Vue

Vue.js) 이벤트 핸들링-키 수식어

ljs981026 2024. 7. 26. 16:00

1. 키 수식어

키보드 이벤트를 처리할 때 특정 키에 반응하도록 이벤트 핸들러를 설정하는 데 사용됩니다. 키 수식어를 사용하면 특정 키가 눌렸을 때만 이벤트가 동작되도록 제한할 수 있습니다. 이러한 기능은 폼 처리나 키보드 단축키를 구현할 때 유용합니다.

 

2. 사용 예제

<template>
	<input type="text" @keydown.enter="handler" />
	<input type="text" @keydown.ctrl.shift.enter="handler" />
</template>

<script>
export default {
	methods: {
		handler(e) {
			console.log(e);
			console.log('submit!');
		},
	},
};
</script>

위 코드와 같이 keydown 이벤트가 일어날 때 특정 키가 눌렸을 때만 이벤트가 동작되도록 하기 위해 keydown. ["입력키"] 수식어를 붙여주면 됩니다. chaining으로 여러 개의 특정키가 입력될 때 동작하도록 제한할 수도 있습니다. 입력키 값은 이벤트 객체에서 "key" 값입니다.

 

참고 문서:

https://v2.ko.vuejs.org/v2/guide/events.html#%ED%82%A4-%EC%88%98%EC%8B%9D%EC%96%B4