Vue.js 이벤트 처리: v-on 디렉티브를 활용하여 클릭 이벤트 처리하기

예제 1: 클릭 이벤트 처리하기

파일명: ClickEvent.vue

<template>
  <div>
    <button v-on:click="handleClick">Click me</button>
    <p v-if="clicked">버튼이 클릭되었습니다!</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      clicked: false
    };
  },
  methods: {
    handleClick() {
      this.clicked = true;
    }
  }
};
</script>

출력 결과:

<div>
  <button>Click me</button>
  <p>버튼이 클릭되었습니다!</p>
</div>

설명:
이 예제에서는 Vue의 v-on 디렉티브를 사용하여 클릭 이벤트를 처리합니다. 버튼을 클릭하면 handleClick 메서드가 호출되어 clicked 데이터 속성의 값을 true로 변경하고, 이에 따라 p 태그가 나타납니다.

예제 2: 이벤트 객체 활용하기

파일명: EventObject.vue

<template>
  <div>
    <button v-on:click="handleClick">Click me</button>
  </div>
</template>

<script>
export default {
  methods: {
    handleClick(event) {
      alert('클릭 위치: ' + event.clientX + ', ' + event.clientY);
    }
  }
};
</script>

출력 결과:

• 클릭 시 경고창에 클릭한 위치의 x, y 좌표가 나타납니다.

설명:
이 예제에서는 Vue의 v-on 디렉티브를 사용하여 클릭 이벤트를 처리하고, 이벤트 객체를 활용하여 클릭한 위치의 x, y 좌표를 출력합니다.

위의 예제를 통해 Vue.js에서 v-on 디렉티브를 사용하여 클릭 이벤트를 처리하는 방법을 자세히 살펴보았습니다. 클릭 이벤트를 통해 사용자와 상호작용하는 웹 애플리케이션을 만들 때 유용한 기능입니다.