[Vue.js]2. data 와 method

data

객체 혹은 함수의 형태로 정보를 가지고 있다.

 

아래는 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>

 

출력 결과

 

물론 이렇게 정적인 코딩도 가능하지만, 

</p>Hello it's function!</p>

 

우린 반응형 data , 즉 title 의 값을 원할때마다 원하는 값으로 바꾸고싶기때문에 위의 예제처럼 {{ }} 을 통해 변수에 접근한다.

 

methods

함수를 저장하고있는 속성

 

이렇게 howAreyou() 라는 함수를 methods 에 보관하고

new Vue({
   el : "#app1",
    data : { // 객체형태
        title : "Hello it's object",
    },
    methods : {
    	howAreyou : function(){
				return "i'm fine !"
      }
    }
});

 

위에서본 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;
      	}
    }
});