[Vue.js] 이벤트 핸들링(@click & @change) 사용법 및 예제

오늘도 화면 구성 시 가장 기본적으로 쓰이는 이벤트에 관해 알아볼 것이다.

이벤트 핸들링은 특정 이벤트가 실행될때 함수 혹은 별도의 동작을 실행시키는 기능이다.

대표적으로 @click 이벤트와 @change 이벤트가 제일 많이 쓰이므로 사용법과 예제를 알아보고 추후 다른 이벤트 핸들링도 다뤄보도록 하겠다.

 

---

1. v-on:click(@click)

코드

App.vue

<template>
  <div>
    <input v-model="input">
    <button @click="click()">클릭</button>
  </div>
  <div>
    클릭 결과 : {{result}}
  </div>
</template>

<script>
export default {
  name: 'App',
  data(){
    return{
      input:'',
      result:''
    }
  },
  methods:{
    click(){
      this.result = this.input
    }
  }
}
</script>

---

설명

'@click'은 말 그대로 버튼을 클릭 했을 시 함수를 호출하는 기능이다.

■ 'v-on:click'은 간소화시켜 '@click'으로 사용해도 무관하다

<button @click="click()">클릭</button>

클릭 버튼을 클릭했을 시 하단 methods 부분의 click() 함수를 호출한다는 뜻이다.

click()함수가 호출되면 변수 result에 입력값 input을 넣은 후 데이터바인딩 시켜 화면에 뿌려주는 코드이다.

---

결과

1. 기본 화면

2. 입력 후 클릭 시

SMALL

---

 

1. v-on:change(@change)

코드

App.vue

<template>
  <div>
    <select v-model="result" @change="change()">
      <option v-for="(color, index) in list" 
       :value="color.value" 
       v-bind:key="index">
       {{color.name}}
      </option>
    </select>
    <div>
      선택결과 : {{result}}
    </div>
  </div>
</template>

<script>
export default {
  name: 'App',
  data(){
    return{
      list:[
        {name:'선택', value:''},
        {name:'red', value:'a'},
        {name:'blue', value:'b'},
        {name:'green', value:'c'}
      ],
      result:''
    }
  },
  methods:{
    change(){
      alert(this.result)
    }
  }
}
</script>

---

설명

'@change'는 해당 태그의 값이 변할때 함수 혹은 특정 동작이 실행되도록 하는 기능이다.

이전 블로그 내용인 'select' 예제를 그대로 따와 '@change' 내용을 추가하였으니 간단하게 설명하겠다.

<select v-model="result" @change="change()">

'@click'과 마찬가지로 해당 태그에 넣어 사용하지만 클릭과 다르게 해당 값이 변하면 자동으로 함수가 실행하도록 만들었고, 선택한 값이 팝업창에 뜨도록 함수를 설정한 코드이다.

---

결과

1. 기본 선택 화면

 

2. select 태그의 값이 변할 시 나타나는 팝업 문구

---