[Vue] v-on

# v-on

DOM 요소에 이벤트 리스너를 연결 및 수신

= addEventListener를 부착한거

v-on도 @로 대신 써도 됨

 

v-on:event="handler"
@event="handler"

handler의 종류

• Inline handlers: 이벤트가 트리거될 때 실행 될 JavaScript 코드
• Method handlers: 컴포넌트에 정의된 메서드 이름

 

1.lnline handlers

간단한 이벤트를 처리할 때 사용됨

const count = ref(0)

<button v-on:click="count++">Add 1</button>

 

 

 

 

2. Method handlers

Inline으로 불가능할 때(함수가 너무 길 때)

const name = ref('Bok')
const myFun = function (event) {
  console.log(`hello, ${name.value}`)
}

함수를 정의해 주고

<button @click="myFun">Hello</button>

바로 함수 붙여주기

 

 

+ 해당 함수에서 매개변수도 설정 가능

const greeting = function (message) {
  console.log(message)
}

<button @click="greeting('hello')">Say hello</button>

 

inline에서 인자를 줄 수 있음

 

이때, 매개변수에 event가 들어간다면?

const warning = function (message, event) {
  console.log(message)
  console.log(event)
}

<button @click="warning('경고', $event)">Submit</button>

$event 형태로 들어간다

 

 

 

# Event Modifiers

다양한 modifier가 있음

예를들면 event.preventDefault()를 modifier에서 할 수 있음

<form @submit=.prevent="onSubmit">
  <input type="submit">
</form>
<a @click.stop.prevent="onLink">Link</a>

여러개 나열하면서 쓸 수 있다 → 작성한 순서대로 실행

 

 

 

 

# Key Modifiers

<input type="text" @keyup.enter="onSubmit">

엔터를 쳤을 때 함수 발동

자세한 내용은 mdn문서 참고

 

다른 v-on 내용은 공식문서 참고