직역하자면, template 라는, HTML을 확장한 구문을 사용함으로서 HTML이 JavaScript코드를 기반으로 어떻게 노출되어야 하는지를 설명해줄 수 있게끔 해주는 특성을 말한다. 이때 HTML은 자동으로 업데이트된다.
<script>
export default {
data() {
return {
message: 'Hello World!',
counter: {
count: 0
}
}
}
}
</script>
<template>
<h1>{{ message }}</h1>
<p>Count is: {{ counter.count }}</p>
</template>
코드를 살펴본 후 의역을 해보자.
우선 script언어로 상단에서 표현을 한 것이 보인다.
Data는 데이터의 변화에 따른 반응을 업데이트하여 객체로 반환하는 함수라고 한다. 정의에 맞게 함수형 선언을 하였고, 곧바로 return을 해주고 있다.
return으로는 message, counter(object:property - count)라는 property를 가진 객체를 반환하고 있다.
그렇게 script문은 끝이 났다. 이번엔 template 태그 내부를 살펴보자.
HTML언어로 쓰였는데, h1태그 안에 '{{}}' 표현이 쓰인 것을 볼 수 있다. 그리고 그 안에는 data() 함수의 리턴 객체중 message를 호출하고 있다.
-> template안에서 data() property를 사용하기 위해서는 {{}} (mustaches syntax)를 사용해야 한다.
{{}} 안의 내용물은 JS expression 사용이 가능하다.
<h1>{{ message.split('').reverse().join('') }}</h1>
<p>문 안에 counter.count를 보면 객체의 property 호출 방식도 크게 벗어나지 않는 다는 것을 알 수 있다.