[Vue] - Vue Events, v-on 디렉티브

Vue 이벤트 처리 (Vue Event Handling)

Vue.js에서는 사용자 상호작용(예: 클릭, 입력, 마우스 이벤트 등)을 감지하고 처리할 수 있는 강력한 이벤트 처리 시스템을 제공합니다. 이를 통해 버튼 클릭, 폼 제출, 키보드 입력 등과 같은 이벤트에 반응하여 동작을 실행할 수 있습니다. Vue는 v-on 디렉티브를 사용하여 이러한 이벤트를 바인딩하고 처리합니다. v-on은 @로 축약할 수 있습니다.

주요 특징:

• 이벤트 리스너 추가: v-on 디렉티브를 통해 DOM 이벤트를 감지하고, 해당 이벤트에 대한 핸들러(함수)를 정의할 수 있습니다.
• 축약형 사용 가능: v-on 디렉티브는 @로 축약하여 사용할 수 있습니다.
• 이벤트 객체 접근: 이벤트 핸들러 함수에 event 객체를 전달하여 이벤트에 대한 자세한 정보를 활용할 수 있습니다.
• 키보드 이벤트, 수식어: 클릭이나 키보드 이벤트 등에 대해 다양한 수식어를 제공하여 좀 더 세밀하게 이벤트를 제어할 수 있습니다.

기본 사용법:

클릭 이벤트:

<button v-on:click="handleClick">클릭하세요</button>

또는 축약형으로:

<button @click="handleClick">클릭하세요</button>

위 코드는 사용자가 버튼을 클릭하면 handleClick 함수가 실행됩니다. handleClick은 Vue 인스턴스의 메소드로 정의되어야 합니다.

이벤트 핸들러 함수:

handleClick 메소드는 다음과 같이 Vue 인스턴스 내에 정의됩니다.

<script>
export default {
  methods: {
    handleClick() {
      console.log('버튼이 클릭되었습니다.');
    }
  }
}
</script>

이벤트 객체 사용:

이벤트 객체를 사용하여 이벤트의 세부 정보에 접근할 수 있습니다. 예를 들어, 클릭된 좌표, 누른 키, 입력된 값 등을 얻을 수 있습니다.

<button @click="handleClick($event)">클릭하세요</button>

$event는 JavaScript의 이벤트 객체로 전달되며, 이벤트 핸들러에서 이를 활용할 수 있습니다.

methods: {
  handleClick(event) {
    console.log(event);  // 이벤트 객체 정보 출력
  }
}

이벤트 수식어:

Vue는 다양한 이벤트 수식어를 제공하여 이벤트 처리 방식을 제어할 수 있습니다. 몇 가지 주요 수식어는 다음과 같습니다.

1. .stop: 이벤트 전파를 중단합니다.

<button @click.stop="handleClick">이벤트 전파 중단</button>

이벤트가 상위 요소로 전파되지 않도록 중단합니다.

2. .prevent: 기본 동작을 방지합니다.

<form @submit.prevent="handleSubmit">폼 제출</form>

폼 제출 시 페이지가 새로고침되지 않도록 기본 동작을 방지합니다.

3. .capture: 이벤트를 캡처 단계에서 처리합니다.

<button @click.capture="handleClick">캡처 단계에서 처리</button>

이벤트가 버블링 단계가 아닌 캡처 단계에서 처리됩니다.

4. .self: 이벤트가 해당 요소에서만 발생할 때 처리합니다.

<div @click.self="handleClick">여기에서만 클릭 반응</div>

해당 요소에서 직접 클릭된 경우에만 이벤트 핸들러가 호출됩니다. 자식 요소에서 발생한 클릭 이벤트는 무시됩니다.

5. .once: 이벤트가 한 번만 발생하도록 처리합니다.

<button @click.once="handleClick">한 번만 클릭 처리</button>

이벤트가 한 번만 실행된 후 자동으로 해제됩니다.

키보드 이벤트 수식어:

특정 키 입력에 대한 이벤트를 처리할 때는 키보드 수식어를 사용할 수 있습니다. 예를 들어, enter 키를 누를 때 이벤트를 처리하려면 다음과 같이 작성할 수 있습니다.

<input @keyup.enter="submitForm" />

위 코드에서 사용자가 enter 키를 누를 때 submitForm 메소드가 실행됩니다.

다양한 키 수식어:

• @keyup.enter: Enter 키 입력 시
• @keyup.esc: Escape 키 입력 시
• @keyup.tab: Tab 키 입력 시
• @keyup.delete: Delete 또는 Backspace 키 입력 시

마우스 버튼 수식어:

• @click.left: 왼쪽 마우스 버튼 클릭 시
• @click.right: 오른쪽 마우스 버튼 클릭 시
• @click.middle: 가운데 마우스 버튼 클릭 시

마우스 휠 이벤트:

<div @wheel="handleScroll">스크롤</div>

마우스 휠을 스크롤할 때 이벤트가 발생합니다.

요약

• v-on 디렉티브는 Vue.js에서 이벤트를 처리하는 기본적인 방식입니다. 이를 통해 클릭, 입력, 키보드, 마우스 등의 이벤트를 처리할 수 있습니다.
• 축약형 @을 사용하여 코드의 가독성을 높일 수 있습니다.
• Vue는 다양한 이벤트 수식어(.stop, .prevent, .once 등)를 제공하여 이벤트 처리 방식을 세밀하게 제어할 수 있습니다.
• 키보드 이벤트와 마우스 이벤트에 대한 추가적인 수식어도 활용할 수 있습니다.