이전 글에서 우리는 첫번째 VueJS Application을 만들어보았습니다. {{ title}}를 통해 Vue의 data 내에 선언된 정보, title을 출력하고 선언된 data.title의 값을 직접 변경하여 title의 값을 변경해보았는데요. 이를 통해 Vue가 정보를 어떻게 다루는 지를 알아보았다면 이번엔 함수를 어떻게 다루는지를 알아봅시다.
1. 함수 저장소, methods
Vue의 정보들을 저장하는 저장소가 data라면 함수들을 저장하고 있는 곳이 바로 methods 입니다. 간단히 그 사용 예를 알아볼까요?
[HTML]
[JavaScript]methods 내에 howAreYou()라는 함수를 선언해주었습니다.
위의 코드를 보시면 Vue의 howAreYou()라는 함수는 “기분이 어때?”라는 문자열을 출력해주는 간단한 함수로 정의해주었습니다. 그리고 Run 버튼을 누르면?
{{ howAreYou() }} 로 지정해준 곳에 함수의 결과물이 출력된 것을 확인하실 수 있습니다.
2. Vue 내에서 Vue를 지칭하는 단어, this
지난 글을 통해 data는 Vue가 가지고 있는 정보들의 저장소라고 말씀드렸었는데요. 저장소에 저장한다는 것은 우리가 원하는 때에 결국 그것을 빼서 쓸수 있어야 의미가 있겠죠? 이럴 때 data안에 저장된 값을 꺼내서 쓸 수 있는 마법의 단어가 있습니다. 바로 this입니다.
[HTML]{{ title }} 자리에 {{ sayHello() }} 를 넣었습니다. 이 sayHello() 를 통해 title을 불러와보도록 하겠습니다.
[JavaScript]methods에 sayHello()가 this.title이란 값을 출력하도록 정의되어 있습니다.
여기서 this가 바로 Vue를 가리키는 마법의 단어입니다. 즉, this.title은 Vue에 정의된 title이라는 값을 가져오라는 뜻입니다. this는 data 내의 값을 불러올 때만 사용되지 않고 methods의 함수를 불러올 때도 사용됩니다. 이런 경우는 추후에 사용될 때 다시 설명을 드리겠습니다.
자 그럼 결과물을 확인해봐야겠죠?
{{ title }}로 출력해준 경우와 동일한 결과물을 확인하실 수 있습니다.
마치며..
이번 글에서는 함수 저장소인 methods와 Vue 내에서 Vue를 가리키는 this에 대해 간략히 알아보았습니다. 이제 여러분은 Vue 내에서 함수와 값을 저장하고 출력할수 있게 되셨습니다.
자 하지만 우리가 배운 것처럼 화면에 문자열을 출력해야하는 간단한 경우가 아니라 HTML 속성 내에서 Vue 의 정보나 함수를 사용하고 싶어진다면 어떻게 해야할까요? 이런 역할을 해주는 것이 바로 디렉티브입니다.
다음 글에서 확인해보겠습니다.
