[Vue] 뷰 이벤트 핸들링 완벽 가이드

vue.js 뷰.js

Vue.js는 웹 애플리케이션에서 사용자와의 상호작용을 쉽고 강력하게 처리할 수 있는 이벤트 핸들링 기능을 제공합니다. 버튼 클릭, 입력, 폼 제출 등 다양한 이벤트를 효율적으로 관리할 수 있으며, 직관적인 문법과 다양한 수식어 덕분에 생산성과 유지보수성이 뛰어납니다.

 

---

 

1. 기본 이벤트 리스닝 – v-on과 @

• v-on 디렉티브를 사용해 HTML 요소에서 발생하는 이벤트를 감지하고, 특정 메서드를 호출할 수 있습니다.
• v-on은 @로 축약해서 자주 사용합니다.

  클릭하세요



export default {
  methods: {
    handleClick() {
      alert("버튼이 클릭되었습니다!");
    }
  }
};

• 다양한 이벤트(@mouseover, @keyup, @submit 등)도 동일한 방식으로 처리할 수 있습니다.

 

---

 

2. 인라인 핸들러와 메서드 핸들러

• 인라인 핸들러: 템플릿 내에서 바로 실행할 코드를 작성합니다.
• 더하기 클릭
• 메서드 핸들러: 복잡한 로직은 컴포넌트의 methods에 정의한 함수를 사용합니다.
• 클릭
• 인라인 핸들러에서 메서드 호출과 인자 전달
• 클릭
• 이벤트 객체 접근
  • $event 또는 화살표 함수로 이벤트 객체를 전달할 수 있습니다.

    클릭
    handleClick(event)">클릭

  • 이벤트 객체를 활용해 클릭 위치, 입력 값 등 다양한 정보를 활용할 수 있습니다.

 

---

 

3. 이벤트 수식어(Event Modifiers)

Vue는 자주 쓰는 이벤트 제어 로직을 수식어로 간단하게 처리할 수 있게 해줍니다.

• .stop : 이벤트 전파 중지 (event.stopPropagation())
• .prevent : 기본 동작 방지 (event.preventDefault())
• .capture : 캡처 단계에서 이벤트 리스너 실행
• .self : 이벤트가 해당 요소에서만 발생할 때만 실행
• .once : 이벤트를 한 번만 실행
• .passive : passive 옵션으로 리스너 등록

전파 중지
폼 제출 방지

• 여러 수식어를 조합해서 사용할 수 있습니다.

  중지+방지

• 이벤트 수식어는 기존 JS의 event.preventDefault(), event.stopPropagation()을 템플릿에서 간단히 대체합니다.

 

---

 

4. 키보드 및 마우스 이벤트 수식어

• 키 수식어: 특정 키 입력에만 반응
• 마우스 버튼 수식어: 특정 마우스 버튼에만 반응
• 오른쪽 클릭 휠 클릭
• 시스템 키 조합: Ctrl, Alt, Shift, Meta 등
• Ctrl+클릭

 

---

 

5. 실전 예시와 팁

• 폼 입력 처리
• select, change 이벤트
• {{ item }}
• 이벤트 객체 활용
• 이벤트 객체 확인

 

---

 

결론

Vue.js의 이벤트 핸들링은 직관적이고 강력합니다.

• v-on과 @, 인라인/메서드 핸들러, 이벤트 수식어, 키/마우스 수식어를 적극 활용하면
  복잡한 사용자 인터랙션도 깔끔하게 구현할 수 있습니다.

 

[Vue] 뷰 이벤트 핸들링

 

Vue.js 리스트 처리: v-for 디렉티브 완벽 가이드