// v-on: === @
// 이벤트 핸들링에서 직접 로직을 작성하는 것은 좋지 않다.
// 따라서 script 에서 methods 이벤트 핸들러를 제공한다.

// handler 함수에서 매개변수 활용
// 앞선 예제에서 이벤트 핸들링에서 함수를 사용할 때 () 가 없던거는 vue 에서 제공하는 방식이다.
<template>
  <button @click="handler('hi', $event)">
    Click 1
  </button>

  <button @click="handler('what', $event)">
    Click 2
  </button>
</template>

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

// 하나의 이벤트에서 발생하는 메소드가 여러개라면 , 로 구분하고 () 를 붙여준다.
<template>
  <button @click="handlerA(), handlerB()">
    Click 1
  </button>
</template>

<script>
export default {
  methods: {
    handlerA() {
      console.log('A')
    },
      handlerB() {
    console.log('B')
    }
  }
}
</script>