Vue method는 실행 가능한 기능을 Vue 인스턴스 내부에 호출 가능한 함수 형태로 보관하는 영역이다.
methods 속성도 Vue 인스턴스 내부에 선언한다.
const app = new Vue({
//..중간 생략..
이름 : function(){},
//또는
이름(){},
//..중간 생략
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue method</title>
<style>
input {
font-size: 20px;
padding:0.5em;
display: block;
margin: 0.5em 0;
}
button {
font-size: 20px;
padding:0.5em;
margin-right: 0.5em;
}
</style>
</head>
<body>
<div id="app">
<input type="text" v-model="number">
<button v-on:click="plusOne">plusOne</button>
<button v-on:click="plusTen">plusTen</button>
<button v-on:click="minusOne">minusOne</button>
<button v-on:click="minusTen">minusTen</button>
<button v-on:click="plus(1)">plus(1)</button>
<button v-on:click="minus(1)">minus(1)</button>
</div>
<script src="https://unpkg.com/vue@next"></script>
<script>
const app = Vue.createApp({
data(){
return {
number:0,
};
},
methods:{
plusOne(){
this.number += 1;
},
plusTen(){
this.number += 10;
},
minusOne(){
this.number -= 1;
},
minusTen(){
this.number -= 10;
},
plus(count){
this.number += count;
},
minus(count){
this.number -= count;
},
}
});
app.mount("#app");
</script>
</body>
</html>
위의 예제를 실행하면 버튼을 누름에 따라 미리 만들어둔 메소드가 실행되는 것을 확인할 수 있다. 메소드 내부에서는 this라는 키워드로 Vue instance의 다른 요소에 접근할 수 있으며 이를 통하여 data와 같은 속성들을 이용한 작업을 수행할 수 있다.
다른 메소드를 호출할 경우에도 반드시 this 키워드를 이용해야 한다.