Data

객체 혹은 함수의 형태로 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 !",
   	}
   }      
});

💡 Data 변수를 HTML 상에서 사용하고 싶을 때

이 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>

📃 Data 를 사용하는 이유

물론 HTML 의 <p></p> 태그를 이용해서 정적으로 코딩을 할 수도 있다.

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

Methods

data 가 정보를 담고있는 속성이라면 methods 는 vue 인스턴스가 사용할 함수를 저장하고있는 속성이다

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

이렇게 사용할howAreyou() 라는 함수를 methods 에 보관한다.

💡 Methods 안의 함수를 HTML 상에서 사용하고 싶을 때

그리고 위에서본 data 의 변수처럼 methods 안에 있는 함수에 접근하고 싶은경우 {{ }} 를 사용하면된다.

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<div id="app1">
  <p>{{ title }}</p>
  <p>
   {{howAreyou()}}
  </p>
</div>

💡 Methods 에서 data에 접근하고 싶을 때

그럼 여기서, howAreyou() 라는 함수에서 data 안의 title 이라는 변수에 접근하고 싶은 경우엔 어떻게 해야될까 ?

바로 아래처럼 this 를 사용하면 된다.

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