Vue.js Study day 1

Declarative Rendering

직역하자면, 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 호출 방식도 크게 벗어나지 않는 다는 것을 알 수 있다.