[ VueJS 입문 ] VueJS 함수 저장소 / VueJS Methods

• 함수 저장소, methods - https://jsfiddle.net/sunghun/th2m9ws7/1/

Vue의 정보를 저장하는 곳이 data라면 함수를 저장하는 곳은 methods 이다. 예제에 보면 methods에 howAreYou() 라는 함수를 선언하였다. 간단하게 "기분이 어때?"라는 문자열을 return한 함수이다. 해당 코드를 Run버튼을 눌러 실행해보면 {{ howAreYou() }} 자리에 해당 문자열이 나타나는 것을 볼 수 있다.

 

• Vue 내에서 Vue를 지칭하는 단어, this - https://jsfiddle.net/sunghun/th2m9ws7/2/

Data 안의 정보를 가져와 바로 사용하는데 있어 필요한 마법의 단어는 this 이다. 예제를 보면 sayHello()라는 함수에 this.title 을 return 받는 함수를 작성하였다. Run버튼을 눌러 실행해 보면 {{ sayHello() }}의 위치에 title값이 들어간 것을 확인 할 수 있다. 즉 this.title은 현재 Vue에 정의된 title을 가져오라는 뜻. This는 data의 내용뿐 아니라 methods의 함수를 부를때도 사용된다.