객체
혹은 함수
의 형태로 vue 인스턴스가 사용할 정보를 가지고 있는 속성이다.
아래는 data 안에 title 이라는 변수를 넣어준 javascript 코드다.
new Vue({
el : "#app1",
data : { // 객체형태
title : "Hello it's object",
}
});
new Vue({
el : "#app2",
data() { // 함수형태
return {
title : "Hello it's function !",
}
}
});
이 title
이라는 변수를 HTML 상에서 사용하고싶은경우, 아래처럼 {{ }}
안에 변수명을 써주면 접근이 가능하다.
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<div id="app1">
<p>{{ title }}</p>
</div>
<div id="app2">
<p>{{ title }}</p>
</div>
물론 HTML 의 <p></p>
태그를 이용해서 정적으로 코딩을 할 수도 있다.
그러나 우린 반응형 data , 즉 title
의 값을 원할때마다 원하는 값으로 바꾸고싶기때문에 위의 예제처럼 {{ }} 을 통해 변수에 접근한다.
data 가 정보를 담고있는 속성이라면 methods 는 vue 인스턴스가 사용할 함수
를 저장하고있는 속성이다
new Vue({
el : "#app1",
data : { // 객체형태
title : "Hello it's object",
},
methods : {
howAreyou : function(){
return "i'm fine !"
}
}
});
이렇게 사용할howAreyou()
라는 함수를 methods 에 보관한다.
그리고 위에서본 data 의 변수처럼 methods 안에 있는 함수에 접근하고 싶은경우 {{ }}
를 사용하면된다.
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<div id="app1">
<p>{{ title }}</p>
<p>
{{howAreyou()}}
</p>
</div>
그럼 여기서, howAreyou()
라는 함수에서 data 안의 title
이라는 변수에 접근하고 싶은 경우엔 어떻게 해야될까 ?
바로 아래처럼 this
를 사용하면 된다.
new Vue({
el : "#app1",
data : { // 객체형태
title : "Hello it's object",
},
methods : {
howAreyou : function(){
return this.title;
}
}
});