Vue.js study 2(methods)

Vue의 정보들을 저장하는 저장소가 data라면 함수들의 저장소는 말 그대로 methods이다.

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<div id="app">
  <p>{{ sayHello() }}</p>
  <p>{{ howAreU() }}</p>
</div>

HTML에 함수 howAreU()를 p태그 안에 넣어주었다.

new Vue({
	el: "#app",
  data: {
  title: "Hello clem!!!! I am vue.js"
  },
  methods: {
  	howAreU: function() {
    	return "기분이 어떠니?"
    },
    sayHello: function() {
    	return this.title
    }
  }
});

그리고 함수 저장소를 만들어서 methods :{ } 함수들을 정의하는데

howAreU: function() { 
	return "기분이 어떠니"
}

return 값이 HTML에 정의된 함수로 출력되게 된다.

또 변수 title을 또 다른 함수로 정의 해보았는데 - sayHello()

    sayHello: function() {
    	return this.title
    }

여기서 이 this를 vue를 가리킨다. 즉, this.title은 vue 안의 변수 title을 return하게 되므로 같은 결과 값들을 출력할 수 있게 되는 것이다.

출처 - 맨땅에 VueJS