[Vue] Vue에서 event를 다루는 방법

 

안녕하세요. 혀코입니다.

이번 시간에는 Vue에서 event를 다루는 방법에 대해서 알아보겠습니다.

 

클릭해서 숫자가 1씩 증가하는 프로그램을 만들어 보겠습니다.

<template>
  <h1 v-on:click="add">{{ count }}</h1>
</template>

<script>
export default {
  data() {
    return {
      count: 0
    }
  },
  methods: {
    add() {
      this.count += 1
    }
  }
}
</script>

 

이때, v-on 은 이벤트 바인딩할 때 사용하는 것으로 약어로 다음과 같이 @click으로 대체해서 사용할 수 있습니다.

 

<template>
  <h1 @click="add">{{ count }}</h1>
</template>

<script>
export default {
  data() {
    return {
      count: 0
    }
  },
  methods: {
    add() {
      this.count += 1
    }
  }
}
</script>

 

다음으로 버튼을 클릭했을 때 버튼의 text를 출력해 보도록 하겠습니다.

<template>
  <button @click="message">Hello World</button>
</template>

<script>
export default {
  data() {
    return {
      count: 0
    }
  },
  methods: {
    message(e) {
      console.log(e.target.textContent)
    }
  }
}
</script>

 

이벤트 객체 e를 받아서 해당 버튼 태그의 textContent 즉 텍스트를 출력할 수 있습니다.

또한, click 이벤트를 받아서 함수를 실행할때 parameter 값을 지정해서 넘겨줄 수 있습니다.

 

<template>
  <h1>{{ count }}</h1>
  <button @click="add(1)">+1</button>
  <button @click="add(2)">+2</button>
</template>

<script>
export default {
  data() {
    return {
      count: 0
    }
  },
  methods: {
    add(n) {
      this.count += n
    }
  }
}
</script>

 

 

그리고 클릭 이벤트를 받아서 parameter 값과 event 값을 동시에 넘겨줘서 함수의 실행값으로 사용하는 방법은 다음과 같습니다.

 

<template>
  <button @click="message('Hello', $event)">Hello</button>
</template>

<script>
export default {
  methods: {
    message(text, e) {
      console.log(text)
      console.log(e)
    }
  }
}
</script>

 

클릭 이벤트를 받아서 두개 이상의 함수를 동시에 실행하고자 할때는 넘겨줄 parameter가 없는 경우라도 비어있는 괄호를 꼭 붙여야 두개의 함수가 동시에 실행합니다.

<template>
  <h1>{{ count }}</h1>
  <button @click="add(), message()">+1</button>
</template>

<script>
export default {
  data() {
    return {
      count: 0
    }
  },
  methods: {
    add() {
      this.count += 1
    },
    message() {
      console.log('1이 추가되었습니다.')
    }
  }
}
</script>

 

이렇게 Vue에서 event를 다루는 방법에 대해서 알아봤습니다.

해당 정보가 도움이 되셨다면, 공감과 구독 부탁 드립니다.

감사합니다. :)