Vue 이벤트

November 14, 2023

1. 인라인 이벤트 처리

Vue에서 이벤트 처리는 v-on 디렉티브를 이용하여 처리
v-on:[event name]="표현식"

<div id>
    <button v-on:click="balance += parseInt(amount)"> Money </button>
</div>

v-on 디렉티브는 @로 줄여 쓸 수 있음
표현식에서 이벤트 발생 시점의 다양한 정보 획득을 위해 이벤트 객체를 사용해야 할 경우 $event 를 사용
@click="test($event)"
간단한 이벤트 처리는 인라인에 화살표 함수를 등록하여 처리
전통적인 자바스크립트 함수로 등록시 this 가 전역객체(window)를 참조하여 오류 발생
<input id="a" type="text" :value="name" @input="(e) => this.name = e.target.value"/>
모든 이벤트를 인라인으로 작성할 수 는 없으므로 현실적인 이벤트 처리방법은 아님
Vue 컴포넌트 인스턴스에 등록한 메서드를 이벤트 처리 함수로 사용

2. 이벤트 핸들러 Method

<div>
    <button v-on:click="add"> Money </button>
</div>

<script>
    --- 생략 ---
    methods:{
        add(){
            if{
                ...
            }else{
                ... 
            }
        },
    }
</script>

복잡한 기능은 Method를 미리 작성하고, v-on 디렉티브로 참조하여 이벤트 처리
하나의 이벤트에 대해 여러 이벤트 핸들러를 등록할려면 이벤트 객체를 인자로 전달하여 메서드를 호출
<button @click="change($event), change2($event)/>