2.1.4 Vue에서 속성 살펴보기

크롬에서 애플리케이션을 다시 로드하면 그림 2-6과 같이 sitename 속성 값을 보여 줍니다.

▲ 그림 2-6 웹 저장소 헤더에 표시된 sitename 속성

 

헤더의 시각적인 모습은 chapter-02/assets/css/app.css의 스타일시트가 표현하고 있습니다. 우리 스타일시트와 부트스트랩을 사용해서 애플리케이션을 디자인하겠습니다. 헤더 모습을 바꾸고 싶다면 앞 파일을 열어 header h1로 정의된 스타일을 찾으면 됩니다.

애플리케이션이 초기화될 때 Vue는 자동으로 각 데이터 객체의 속성에 getter와 setter 함수를 생성합니다. 이는 추가적인 코드를 작성하지 않아도 어떤 인스턴스 속성의 현재 값을 조회하거나 새로운 값을 설정할 수 있게 합니다. 실제로 이 함수들이 실행되는 것을 보기 위해 sitename 속성 값을 보여 주는 getter를 사용해 봅시다.