Vue 이벤트 처리하기 - click/change/key

Vue 이벤트 처리하기 - click/change/key

 

Click 이벤트

 

Vue 에서 가장 많이 보게 될 click 이벤트 처리법을 먼저 살펴보자.

<template>
  <div>
    <button>Add 1</button>
    <p>The count is {{ count }}</p>
  </div>
</template>
<script>
export default {
  name: 'eventVue',
  components: {},
  data() {
    return {
      count: 0,
    };
  },
  setup() {},
  created() {},
  mounted() {},
  unmouted() {},
  methods: {},
};
</script>

이제 버튼을 누를 때마다 값이 1씩 증가하게 만들어 보자.

Vue에서는 이벤트를 추가할때 v-on 속성을 사용한다. 여기서는 클릭 이벤트를 사용하므로 v-on:click="" 속성을 사용하고 큰 따옴표 안에 함수를 넣어주면 된다.

(v-on:click=""은 @click=""으로 줄여쓸 수 있다.)

    <button v-on:click="increaseCounter">Add 1</button>

이벤트에 사용되는 함수는 script 태그안의 methods:{} 안에 넣어주면 된다.

<script>
export default {
  name: 'eventVue',
  components: {},
  data() {
    return {
      count: 0,
    };
  },
  setup() {},
  created() {},
  mounted() {},
  unmouted() {},
  methods: {
    increaseCount() {
      this.count++;
    },
  },
};
</script>

전에 말했듯 메소드의 함수가 data에 접근하기 위해서는 this.을 사용해야 한다.

위처럼 함수를 넣고 클릭하면 화면에 렌더링 된 count의 값이 버튼을 클릭할 때마다 1씩 더해지는 모습을 볼 수 있다.

이벤트 메소드는 한 엘레먼트에 여러개를 바인딩 할 수도 있다.

<template>
  <div>
    <button v-on:click="increaseCount(), alertCount()">Add 1</button>
    <p>The count is {{ count }}</p>
  </div>
</template>
.
.
.
  methods: {
    increaseCount() {
      this.count++;
    },
    alertCount() {
      alert(this.count);
    },
  },

위 와 같이 코드를 적고 실행해보면 버튼을 클릭 할때 마다 숫자가 더해지고, alert 창에 count가 메세지로 표시 되는 것을 볼 수 있다.

 

Change 이벤트

 

이번에는 select 태그를 사용한 change 이벤트를 배워보자.

<template>
  <div>
    <select v-model="flavours.name" @change="changeFlavour()">
      <option v-for="(falvour, i) in flavours" :value="falvour.name" :key="i">
        {{ falvour.name }}
      </option>
    </select>
  </div>
</template>
.
.
.
data() {
    return {
      count: 0,
      flavours: [
        { name: 'Chocolate' },
        { name: 'Vanilla' },
        { name: 'Strawberry' },
      ],
    };
  },
.
.
.
  methods: {
    changeFlavour() {
      alert(this.flavours.name);
    },
  },

실행하면 옵션을 바꿀때 마다 changeFlavour 함수가 실행 되면서 alert 창에 선택한 flavour.name의 값이 출력 된다.

 

Key 이벤트

 

이번에는 key 이벤트를 살펴보자.

우선 input 태그를 생성 뒤 v-model로 textValue라는 값과 바인딩 해보자.

    <input type="text" v-model="textValue" />
.
.
.
 data() {
    return {
      textValue: '',
    };
  },

key와 관련된 이벤트에는 keypress, keyup, keydown이 있는데 일단 keyup을 사용해보자.

    <input type="text" v-model="textValue" @keyup.enter="alertInput" />

@keyup.enter는 엔터키를 누르고 뗐을 때의 이벤트를 의미한다. 이는 키보드의 다른 자판의 값으로도 변경할수 있다.(ex. @keyup.k=""라고 작성하면 k키가 눌렸다가 떼질 때마다 함수가 실행된고, 만약 @keyup=""이라고 작성하면 아무 키를 눌렀다가 떼도 함수가 실행된다. 이벤트 처리시에 자주 사용되는 키값에는 tab, delete, esc, space, up, down, left, right 등이 있다.)

메소드에 엔터키를 누르면 실행될 함수를 넣어주자.

    alertInput() {
      alert(this.textValue);
    },

엔터키를 떼는 이벤트가 일어날 때마다 alert에 textValue 값이 표시 된다.