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