이벤트 핸들러 (Event Handler)

이벤트 핸들러 (Event Handler)

1. 이벤트 핸들러 (Event Handler)

• 이번엔 이벤트 핸들러에 대해 배워봅시다.
• Vue.js의 이벤트 핸들러란? 사용자의 클릭, 요소 위로 마우스를 올리거나 입력 필드에 타이핑하는 등 특정 이벤트가 발생할 때, 실행되는 메서드 or 함수입니다.
• 버튼을 눌렀을 때, JS를 실행하려면 다음과 같이 입력하면 됩니다.

v-on:click="JavaScript 문장"

// v-on을 @로 사용할 수 있음
@click="JavaScript 문장"

 

• #1. 바로 실습해 봅시다. App.vue에 들어가 다음과 같이 입력하여, 버튼 이벤트를 생성해 줍시다.

<template>
  <!-- <div class="menu">...</div> -->
  <div ...>
    <!-- <h4>...</h4> -->
    <!-- <p>...</p> -->
    <button @click="declareNo++">허위매물신고</button>
    <span>신고수 : {{ declareNo }}</span>
  </div>
</template>

<script>
export default {
  // name: ...,
  data() {
    return {
      // 데이터 보관 (데이터는 object 자료형으로 저장)
      declareNo: 0,
      // menuData: [...],
      // productData: [...],
    };
  },
  // components: {},
};
</script>

// <style>...</style>

 

    → 브라우저에 들어가면, 버튼을 누를 때마다 숫자가 오르는 것을 확인할 수 있습니다.

    → JS라면, 버튼 누르면 숫자 찾아서 +1하고 그 숫자를 HTML에 반영했습니다.

    → Vue는 데이터가 실시간으로 반영되기 때문에, 버튼 누르면 관련된 데이터만 +1합니다.

 

• @click 이벤트 말고도 마우스를 올리면 실행하는 @mouseover, 글자를 입력 시, 실행하는 @input등 다양한 이벤트 핸들러가 존재합니다.

 

2. 함수

• 이벤트 핸들어 안에 JavaScript 함수를 만드는 것도 가능합니다.
• data( ) 밑에 methods: { }를 만들어서 그 안에 함수를 만들면 됩니다.
• JS와 달리 Vue는 function을 입력하지 않아도 됩니다.
• #1. 바로 실습해 봅시다. App.vue안에 다음과 같이 입력하여, 함수를 추가해 줍니다.

<template>
  <!-- <div class="menu">...</div> -->
  <div ...>
    <!-- <h4>...</h4> -->
    <!-- <p>...</p> -->
    <button @click="increase">허위매물신고</button>
    <span>신고수 : {{ declareNo }}</span>
  </div>
</template>

<script>
export default {
  // name: ...,
  data() {
    return {
      // 데이터 보관 (데이터는 object 자료형으로 저장)
      declareNo: 0,
      // menuData: [...],
      // productData: [...],
    };
  },
  methods: {
    increase() {
      this.declareNo++; // 함수 안에서 데이터를 쓸 경우, this.데이터명
    },
  },
  // components: {},
};
</script>

// <style>...</style>

 

    → 브라우저에 확인해 보면, 정상적으로 나오는 것을 확인할 수 있습니다.

 

• #2. 다음과 같이 입력하여, 여러 함수를 이용해 모든 상품에 신고 버튼 기능을 구현할 수 있습니다.

<template>
  <!-- <div class="menu">...</div> -->
  <div>
    <h4>{{ productData[0] }}</h4>
    <p>50만원</p>
    <button @click="increase1">허위매물신고</button>
    <span> 신고 수 : {{ declareNo1 }}</span>
  </div>
  <div>
    <h4>{{ productData[1] }}</h4>
    <p>60만원</p>
    <button @click="increase2">허위매물신고</button>
    <span> 신고 수 : {{ declareNo2 }}</span>
  </div>
  <div>
    <h4>{{ productData[2] }}</h4>
    <p>70만원</p>
    <button @click="increase3">허위매물신고</button>
    <span> 신고 수 : {{ declareNo3 }}</span>
  </div>
</template>

<script>
export default {
  // name: "...",
  data() {
    return {
      // 데이터 보관 (데이터는 object 자료형으로 저장)
      declareNo1: 0,
      declareNo2: 0,
      declareNo3: 0,
      // menuData: [...],
      // productData: [...],
    };
  },
  methods: {
    increase1() {
      this.declareNo1++; // 함수 안에서 데이터를 쓸 경우, this.데이터명
    },

    increase2() {
      this.declareNo2++;
    },

    increase3() {
      this.declareNo3++;
    },
  },
  // components: {},
};
</script>

// <style>...</style>

 

• #3. 다음과 같이 입력하여, 사용할 수도 있습니다.

<template>
  <!-- <div class="menu">...</div> -->
  <div>
    <h4>{{ productData[0] }}</h4>
    <p>50만원</p>
    <button @click="increase1">허위매물신고</button>
    <span> 신고 수 : {{ declareNo[0] }}</span>
  </div>
  <div>
    <h4>{{ productData[1] }}</h4>
    <p>60만원</p>
    <button @click="increase2">허위매물신고</button>
    <span> 신고 수 : {{ declareNo[1] }}</span>
  </div>
  <div>
    <h4>{{ productData[2] }}</h4>
    <p>70만원</p>
    <button @click="increase3">허위매물신고</button>
    <span> 신고 수 : {{ declareNo[2] }}</span>
  </div>
</template>

<script>
export default {
  // name: "...",
  data() {
    return {
      // 데이터 보관 (데이터는 object 자료형으로 저장)
      declareNo: [0, 0, 0],
      // menuData: [...],
      // productData: [...],
    };
  },
  methods: {
    increase1() {
      this.declareNo[0]++; // 함수 안에서 데이터를 쓸 경우, this.데이터명
    },

    increase2() {
      this.declareNo[1]++;
    },

    increase3() {
      this.declareNo[2]++;
    },
  },
  components: {},
};
</script>

// <style>...</style>

 

3. 정리하며

• 지금까지 이벤트 핸들러에 대해 알아보았습니다.
• 다음 시간엔 Modal 창에 대해 알아보겠습니다.

Modal

 

※ 코딩애플님의 강의를 참고하였습니다.

 

※ Git 주소

이벤트 핸들러 · NewBean0312/vue-study-2024-03@d9c3e7c