[Vue] Vue의 이벤트 핸들러

1. 이벤트 핸들러 기본 문법

 

Vue에서 이벤트 핸들러를 통해 버튼을 만들어보자.

 

자바스크립트에서는 보통 onclick = " " 문법을 사용한다.

그렇다면 Vue 에서는??

 

<button v-on:click=" "></button>

 

위와 같이 v-on:click 안에 ~~~ 적으면 된다.

 

v-on:click 문법은  @click으로 축약 가능 하다.

--> v-on의 약자가 @라고 보면 된다고 한다,, ( HTML 문법이 아닌 Vue 문법!! )

 

 

 

 

 

 

 

2. 진행 과정 차이

 

예를 들어 버튼을 눌렀을 때 수를 1 증가시키기 위한 코드를 작성하려고 할 때,

 

 

먼저 기본 자바스크립트 스타일은

1. 버튼을 생성하고 누른다.
2. 숫자를 찾아서 +1 해준다.
3. 그런 뒤 +1 된 정보를 HTML에 반영해준다.

 

 

이런 식으로 진행되는 반면 

 

 

 

Vue 에서는

1. 버튼을 생성하고 누른다.
2. 관련 데이터는 자동으로 +1 되어 새로고침된다.

이렇게 조금 더 간편해지는 것을 볼 수 있다.

 

 

 

이는 데이터가 변하면 해당 데이터와 관련된 HTML을 자동으로 바꿔주는 Vue의 특징으로 인한 것이다.

 

 

 

 

 

 

 

3. 함수 사용하기

 

<button v-on:click="@~@!~@~!@!~"></button>

 

 

여기에서 입력할 코드가 너무 길면 가독성이 떨어질 수 있다.

 

이런 경우에는 밑으로 내려가서 함수를 따로 작성한 뒤,

함수의 이름만 가져와 넣어주는 방식으로도 작성이 가능하다.

 

 

틈새 자바스크립트

 

 

- Vue 에서 함수 작성법

 

methods : { 
  함수이름() { 
    this.데이터이름 += 1 
  } 
}

 

script 태그 내부에 이런 식으로 작성하면 된다.

 

이 때 중요한 점은 데이터를 가져다 쓰기 위해서는  this를 데이터 이름 앞에 꼭 붙여줘야 한다는 것 이다.

 

 

 

 

 

 

4. 간단 예제

 

3개의 장소 중 가고 싶은 곳을 투표로 정하려고 할 때

 

  <div>
    <h4>{{products[0]}}</h4>
    <button @click="투표[0]++">투표하기</button> 
    <span>투표 : {{ 투표[0] }}</span>
  </div>

  <div>
    <h4>{{products[1]}}</h4>
    <button @click="투표[1]++">투표하기</button> 
    <span>투표 : {{ 투표[1] }}</span>
  </div>

  <div>
    <h4>{{products[2]}}</h4>
    <button @click="투표[2]++">투표하기</button> 
    <span>투표 : {{ 투표[2] }}</span>
  </div>

 

  data() {
    return {
      투표 : [0, 0, 0],
      products : ['산', '바다', '놀이공원'],
    }
  },

 

 

 

위에서는 3개의 장소와 버튼을 생성하여 투표를 위한 버튼을 각각 생성해두었으며,

하단의 코드에는 각각의 투표 수를 배열 형태로 저장해두었다.

 

 

출력 화면