4. Vue js - 이벤트 핸들러

ㅁ 버튼 이벤트 핸들러

<template>  

  <div>

    <h1>수박</h1>

    <h2>1만원</h2>

  </div>

  <button @click="">과일구매</button>

  <div>구매개수 : 0</div>

</template>

---

ㅁ 버튼 이벤트 생성

<button v-on:click="">과일 구매</button>

or

<button @click="">과일 구매</button>

---

ㅁ 버튼 클릭에 따라서 버튼수 저장 변수

<script>

export default {

  name: 'App',  

  data() {

    return {      

      과일개수 : 0,

    }

  },

  components: {    

  }

}

</script>

---

ㅁ 버튼 이벤트 클릭 했을때 버튼 수량 증가++

<button @click="과일개수++">과일구매</button> <!-- ++ 증가 -->

  <div>과일구매수량 : {{과일개수}}</div>

or

  <button @click="과일개수 += 1">과일구매</button>

    <div>과일구매수량 : {{과일개수}}</div>

---

ㅁ 함수 만들어서 버튼 이벤트 사용가능(응용)

 ㅇ 함수 : 긴코드를 짧은 단어로 축약 할수 있다.

<button @click="increase">과일구매</button> <!-- increase 함수 이름 -->

    <div>과일구매수량 : {{과일개수}}</div>

---

ㅁ 함수등록

<script>

export default {

  name: 'App',  

  data() {

    return {            

      과일개수 : 0,

    }

  },

  methods: {    // Vue에서 함수는 여기다 만듬

    increase(){  // 함수 이름 작명

      this.과일개수 += 1;

    },

    함수2(){

    },

    함수3(){

    },

  },

  components: {    

  }

}

</script>

---

ㅁ 여러개 버튼사용(응용)

<template>  

  <div>

    <h1>수박</h1>

    <h2>1만원</h2>

  </div>

  <button @click="과일구매개수[0] += 1">과일구매</button>

  <div>과일구매수량 : {{과일구매개수[0]}}</div>

  <div>

    <h1>딸기</h1>

    <h2>2만원</h2>

    <button @click="과일구매개수[1] += 1">과일구매</button>

    <div>과일구매수량 : {{과일구매개수[1]}}</div>

  </div>  

  <div>

    <h1>멜론</h1>

    <h2>2만원</h2>

    <button @click="과일구매개수[2] += 1">과일구매</button>

    <div>과일구매수량 : {{과일구매개수[2]}}</div>

  </div>     

<br>

</template>

---

<script>

export default {

  name: 'App',  

  data() {

    return {            

      과일개수 : 0,

      과일구매개수 : [0, 0, 0],

    }

  },

  methods: {    // Vue에서 함수는 여기다 만듬

    increase(){  // 함수 이름 작명

      this.과일개수 += 1;

    },    

  },

  components: {

    

  }

}

</script>