Methods
Vue의 Method는 특정 기능 별로 묶을 수 있는 JS 함수를 의미합니다. Vue에서 메서드는 이벤트를 처리하는 것부터 HTTP 통신까지 다양한 형태의 함수가 존재하게 됩니다.
메서드 형식
new Vue({
methods: {
}
})예시(1)
<button @click="clickBtn">Click Me</button>
new Vue({
methods: {
clickBtn() {
console.log("Call Click Event")
}
}
})예시(2)
메서드에는 단순히 화면 조작을 위한 기능 뿐만 아니라 특정 로직을 담아 놓는 장소로도 활용할 수 있습니다.
<button @click="getData">데이터 로드</button>
new Vue({
data: {
},
methods: {
getData() {
this.fetchData();
},
fetchData() {
/* HTTP 통신 */
}
}
})methods 안에 기능을 정의하게 되면 특정 기능 별로 메서드를 분리할 수 있어 코드를 중복해서 작성하지 않아도 재활용하기 수월합니다.
🎢