Vue의 메서드(method) 사용하기

1. 메서드란?

Vue에서 메서드는 컴포넌트의 동작을 정의하는 함수입니다. 이벤트 처리나 데이터 조작 등의 기능을 구현할 때 사용됩니다.

2. 기본 구현 예제

HTML 구조

<div id="app">
    <p>{{ count }}</p>
    <button v-on:click="addCount">+</button>
</div>

JavaScript 구현

Vue.createApp({
    data() {
        return {
            count: 0
        }
    },
    methods: {
        addCount() {
            this.count++;
        }
    }
}).mount('#app');

3. 핵심 개념 설명

1. 메서드 정의

• methods 객체 안에 함수를 정의합니다.
• this를 통해 컴포넌트의 데이터에 접근할 수 있습니다.

2. 이벤트 바인딩

• v-on:click 디렉티브를 사용하여 이벤트를 처리합니다.
• @click으로 축약해서 사용할 수도 있습니다.

3. 데이터 접근

• 메서드 내에서 this를 통해 data에 정의된 속성에 접근할 수 있습니다.
• this.count로 count 데이터에 접근합니다.

4. 작동 방식

1. 버튼을 클릭하면 addCount 메서드가 호출됩니다.
2. addCount 메서드는 count 값을 1 증가시킵니다.
3. count 값이 변경되면 화면이 자동으로 업데이트됩니다.

5. 메서드 사용 시 주의사항

• 화살표 함수를 사용하면 this 바인딩이 달라질 수 있으므로 주의해야 합니다.
• 메서드는 필요한 경우에만 호출되도록 설계해야 합니다.

6. 학습 포인트

• 메서드 정의 방법
• 이벤트 바인딩 방법
• 데이터 접근 방법
• 반응성과의 연동

7. 테스트 방법

1. 기본 동작 테스트

• 버튼을 클릭하여 count 값이 증가하는지 확인
• 화면에 표시된 숫자가 정상적으로 업데이트되는지 확인

2. 콘솔에서 테스트

// 현재 count 값 확인
console.log(app.count)

// 메서드 직접 호출
app.addCount()

// count 값이 1 증가했는지 확인
console.log(app.count)

4. 이벤트 수식어 테스트

<!-- 더블 클릭 이벤트 -->
<button v-on:dblclick="addCount">더블클릭</button>

<!-- 마우스 오버 이벤트 -->
<button v-on:mouseover="addCount">마우스오버</button>