Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |
Tags
- 자바스크립트
- 프로그래밍
- 교보생명
- 변환
- Vue.js
- 보험
- 수수료
- 파이썬
- 사망
- 가입
- javascript
- 심장질환
- 중도인출
- python
- 인출수수료
- 급성심근경색증
- jQuery
- 문자열
- Java
- 코딩
- 웹개발
- 뇌출혈
- 보험료
- 추가납입
- PythonProgramming
- 특약
- 프론트엔드
- 리스트
- 납입
- 교보
Archives
- Today
- Total
SeouliteLab
[Vue.js] Vue 메소드(methods) 이해와 활용하기 본문
메소드(methods)란?
Vue.js에서 메소드(methods)는 Vue 인스턴스의 메소드로, 템플릿 내에서 이벤트 핸들러나 계산된 데이터 로직을 처리하는 데 사용됩니다. 메소드를 사용하면 Vue 컴포넌트에서 재사용 가능한 로직을 정의하고, 이를 템플릿에서 호출하여 사용할 수 있습니다.
예제
아래 예제에서는 사용자가 버튼을 클릭할 때마다 카운터 값을 증가시키는 메소드를 선언하는 예제를 보여줍니다.
<template>
<div>
<p>카운터: {{ counter }}</p>
<button @click="increaseCounter">카운터 증가</button>
</div>
</template>
<script>
export default {
data() {
return {
counter: 0
};
},
methods: {
increaseCounter() {
this.counter++;
}
}
}
</script>
설명
increaseCounter
메소드는 버튼 클릭 이벤트가 발생할 때 호출됩니다.- 메소드 내부에서는
this.counter
값을 증가시킵니다. - 템플릿에서는
@click
디렉티브를 통해 해당 메소드를 호출합니다.
주요 특징
- 재사용성: 메소드를 사용하여 동일한 로직을 여러 곳에서 사용할 수 있습니다.
- 데이터 변경: 메소드 내부에서 데이터를 변경하면 Vue가 자동으로 리렌더링하여 화면을 업데이트합니다.