728x90
반응형
1. Inline Handlers
- 주로 간단한 상황에 사용한다.
- v-on은 생략하고 @만 쓸 수 있다.
<body>
<div id="app">
<button @click="count++">Add 1</button>
<p>Count: {{ count }}</p>
</div>
<script>
const { createApp, ref } = Vue
const app = createApp({
setup() {
const count = ref(0)
return {
count,
}
},
})
app.mount("#app")
</script>
</body>2. Method Handlers
- Inline handlers로는 불가능한 대부분의 상황에서 사용한다.
- 기본 DOM Event 객체를 자동으로 수신한다.
<body>
<div id="app">
<button @click="myFunc">Hello</button>
</div>
<script>
const { createApp, ref } = Vue
const app = createApp({
setup() {
const myFunc = function (event) {
console.log(event)
console.log(event.currentTarget)
console.log(`Hello ${name.value}!`)
}
return {
myFunc,
}
},
})
app.mount("#app")
</script>
</body>
Inline Handler에서의 메서드 호출
- 메서드 이름에 직접 바인딩하는 대신 Inline Handler에서 메서드를 호출할 수도 있다.
- 이렇게 하면 기본 이벤트 대신 사용자 지정 인자를 전달할 수 있다.
Inline Handlers에서의 event 인자에 접근하기
- Inline Handlers에서 원래 DOM 이벤트에 접근하기
- $event 변수를 사용하여 메서드에 전달
Event Modifiers
- event.preventDefault()와 같은 구문을 메서드에 작성하지 않도록 함
=> 메서드는 DOM 이벤트에 대한 처리보다는 데이터에 관한 논리를 작성하는 것에 집중할 것
- stop, prevent, self 등 다양한 modifiers 제공
Key Modifiers
- 키보드 이벤트를 수신할 때 특정 키에 관한 별도 modifiers를 사용할 수 있음
- 예시) key가 Enter일 때만 onSubmit 이벤트 호출하기
<input @keyup.enter="onSubmit" />728x90
반응형
'Frontend > Vue3' 카테고리의 다른 글
| [Vue3] Computed Property (0) | 2024.05.06 |
|---|---|
| [Vue3] Form 입력 바인딩 (v-model) (0) | 2024.05.05 |
| [Vue3] 동적 데이터 바인딩 (v-bind) (0) | 2024.05.04 |
| [Vue3] 템플릿 문법 (0) | 2024.05.04 |
| [Vue3] Vite를 이용하여 Vue 프로젝트 생성하기 (0) | 2024.05.04 |
