[Vue.js] 이벤트 처리: 클릭 이벤트 활용 가이드

 

Vue.js는 사용자 상호작용을 처리하는 다양한 방법을 제공하며, 그 중에서도 클릭 이벤트는 가장 기본적인 이벤트 중 하나입니다. 버튼, 링크, 또는 기타 요소에 클릭 이벤트를 연결하여 사용자 클릭 시 원하는 동작을 수행할 수 있습니다.

본 가이드에서는 Vue.js에서 클릭 이벤트를 처리하는 방법에 대해 자세히 살펴보겠습니다. 다양한 예시와 설명을 통해 클릭 이벤트를 활용하는 다양한 방법을 이해하고 실제 코드 작성에 활용할 수 있도록 안내합니다.

1. 클릭 이벤트 처리 방법

Vue.js에서 클릭 이벤트를 처리하는 방법은 다음과 같습니다.

1.1 v-on 지시문 사용:

HTML

<element v-on:click="methodName">
  </element>

 

 

위 코드에서 v-on:click 지시문은 element 요소에 클릭 이벤트 리스너를 추가합니다. methodName은 클릭 이벤트 발생 시 호출될 메서드 이름입니다.

1.2 @click 단축 문법 사용:

HTML

<element @click="methodName">
  </element>

 

 

위 코드는 v-on:click 지시문의 단축 문법입니다. @click 지시문 뒤에 바로 메서드 이름을 작성하면 됩니다.

1.3 인라인 이벤트 처리:

HTML

<element @click="() => {
  // 이벤트 처리 코드
}">
  </element>

 

 

위 코드는 인라인 함수를 사용하여 클릭 이벤트를 처리하는 방법입니다. @click 지시문 뒤에 화살표 함수를 작성하면 됩니다. 함수 내부에서 원하는 이벤트 처리 코드를 작성할 수 있습니다.

2. 클릭 이벤트 활용 예시

다음은 클릭 이벤트를 활용하는 몇 가지 예시입니다.

예제 1: 버튼 클릭 시 메시지 출력

HTML

<template>
  <div>
    <button @click="showMessage">버튼 클릭</button>
    <p v-if="show">{{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: '',
      show: false
    }
  },
  methods: {
    showMessage() {
      this.message = '버튼을 클릭했습니다!';
      this.show = true;
    }
  }
}
</script>

 

 

위 예제에서는 버튼 클릭 시 showMessage 메서드가 호출됩니다. 이 메서드는 message 변수에 "버튼을 클릭했습니다!"라는 메시지를 저장하고, show 변수를 true로 설정하여 메시지가 표시되도록 합니다.

예제 2: 목록 항목 클릭 시 상세 정보 표시

HTML

<template>
  <div>
    <ul>
      <li v-for="item in items" :key="item.id" @click="showDetail(item)">
        {{ item.name }}
      </li>
    </ul>
    <div v-if="showDetailItem">
      <h2>{{ showDetailItem.name }}</h2>
      <p>{{ showDetailItem.description }}</p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: 'item1', description: 'description1' },
        { id: 2, name: 'item2', description: 'description2' },
        { id: 3, name: 'item3', description: 'description3' }
      ],
      showDetailItem: null
    }
  },
  methods: {
    showDetail(item) {
      this.showDetailItem = item;
    }
  }
}
</script>

 

 

위 예제에서는 목록 항목을 클릭하면 showDetail 메서드가 호출됩니다. 이 메서드는 클릭된 항목의 데이터를 showDetailItem 변수에 저장하고, 상세 정보가 표시되도록 합니다.