Vue 생성자에 넘겨준 옵션에 데이터 객체를 추가했습니다. 이 데이터 객체는 sitename 속성 하나를 가지며 웹 저장소 이름도 갖고 있습니다.
웹 사이트 이름에는 홈이 필요하기에 애플리케이션 루트 div 요소 내의 마크업에 header 요소를 추가했습니다. heading 요소인 <h1>에 데이터 바인딩 명칭인 v-text="sitename"을 사용했습니다.
v-text 명칭은 속성이 참조하는 문자열을 표현합니다. 이 경우 애플리케이션이 작동하기 시작하면 header에서 “Vue.js 애완용품샵”이라는 텍스트를 볼 수 있습니다.
긴 문자열 중간에 속성 값을 표현하고 싶다면 수염 구문({{property-name}})을 사용해서 속성에 연결할 수 있습니다. 문장 안에 웹 저장소 이름을 포함한다면 <p>Welcome to {{sitename}}</p>라고 쓰면 됩니다.
Tip
Vue는 모든 수염 구문(이중 중괄호) 형식을 쓰는 것이 아니라 텍스트 보간법에만 수염 구문인 {{...}}을 사용합니다. 이 방식의 출처를 알고 싶다면 https://mustache.github.io/mustache.5.html 온라인 매뉴얼을 방문하세요.
데이터 바인딩이 완료되었으니 이제 웹 브라우저에서 헤더가 어떻게 보이는지 확인해 봅시다.