이벤트 처리 (v-on)

Vue 컴포넌트에서 이벤트를 처리할 때는 v-on 디렉티브를 사용함

v-on 디렉티브는 심볼 @로 사용 가능하다.

 

클릭 이벤트 (v-on:click)

 - 클릭 이벤트는 v-on:click="메소드명" 혹은 @click="메소드명"을 사용해서 추가할 수 있음

<template>
  <div>
    <button 
      type="button"
      @click="increaseCounter"
    >
      Add One
    </button>
    <p>{{ counter }}</p>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        counter: 0,
      }
    },
    methods: {
      increaseCounter() {
        this.counter = this.counter + 1
      },
    },
  }
</script>

 

 - 클릭 이벤트 발생 시 여러 개의 함수를 호출하고 싶다면 다음과 같이 작성하면 됨

<template>
  <div>
    <button 
      type="button"
      @click="one(1), two()"
    >
      Click
    </button>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        counter: 0,
      }
    },
    methods: {
      one(num) {
        alert(num)
      },
      two() {
        alert('Two')
      },
    },
  }
</script>

 

Change 이벤트 (v-on:change)

 - change 이벤트가 가장 많이 사용되는 html 태그는 select 이다. 사용자가 select에서 옵션을 바꿀 때마다 change 이벤트가 발생함

 - change 이벤트는 v-on:change="메소드명" 또는 @change="메소드명"으로 사용함

<template>
  <div>
    <select 
      v-model="selectedValue"
      @change="changeSelect"
    >
      <option value="02">서울</option>
      <option value="031">경기</option>
      <option value="064">제주</option>
    </select>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        selectedValue: '',
      }
    },
    methods: {
      changeSelect() {
        alert(this.selectedValue)
      },
    },
  }
</script>

 

Key 이벤트

 - Key 이벤트는 사용자가 키보드 자판을 입력할 때 발생하는 이벤트

 - 사용자로부터 엔터키가 입력되는지 다음과 같이 아주 쉽게 처리할 수 있음

<input @keyup.enter="submit">

 - Vue에서 자주 사용되는 Key 이벤트

.enter	.up
.tab	.down
.left	.right
.esc	.space
.delete (키보드에서 Del키, Backspace키)

 - Control, Shift, Alt 키와 같이 다른 키와 같이 사용되는 특수 키에 대해서는 다음과 같이 처리할 수 있음

<!-- Alt + Enter -->
<input @keyup.alt.enter="clear">

<!-- Ctrl + Click -->
<div @click.ctrl="doSomething">Do Something</div>