728x90
반응형

2024/10/06 2

[콜럼Vue스] 이벤트 핸들러 메서드

이벤트 핸들러 메서드 요약이벤트 핸들러 메서드는 Vue 컴포넌트에서 사용자 상호작용에 따라 호출되는 함수임.메서드로 로직을 분리하여 템플릿의 복잡성을 줄이고, 가독성을 높임.이 코드에서는 입금과 인출 버튼 클릭 시 각각 **deposit()**과 withdraw() 메서드가 호출되어 금액 처리와 유효성 검사가 수행됨.유효성 검사나 조건 처리 같은 복잡한 로직은 인라인 이벤트 처리보다 메서드로 분리하는 것이 효율적임.이처럼 이벤트 핸들러 메서드를 사용하면, Vue 컴포넌트에서 복잡한 로직을 더 명확하고 구조적으로 처리할 수 있음.이벤트 핸들러 메서드란 Vue.js에서 **사용자 상호작용(이벤트)**이 발생했을 때, 해당 이벤트에 대한 처리 로직을 메서드로 정의하여 호출하는 방식을 말함. 이러한 메서드는 V..

[콜럼Vue스] 인라인 이벤트 처리

인라인 이벤트 처리란 Vue.js에서 템플릿 안에 바로 이벤트 핸들러를 넣어서 처리하는 방식임. v-on 디렉티브나 **@**을 써서 간단한 로직을 직접 작성할 수 있음. 복잡한 로직은 메서드로 빼는 게 좋지만, 간단한 경우 인라인 이벤트 처리로 바로 처리 가능함.  금액: 입금 인출 계좌 잔고: {{ balance }} 1. 인라인 이벤트 처리 사용 부분이 코드에서 인라인 이벤트 처리는 다음과 같이 사용됨:입금인출**v-on:click="balance += parseInt(amount)"**는 버튼을 클릭했을 때 amount 값을 정수로 변환한 후 **balance**에 더하는 작업을 인라인에서 직접 처리함.**v-on:click="balance -= parseInt(amount)"**는 인출..

728x90
반응형