Vue.js-뷰 템플릿

뷰의 템플릿(template)은 HTML,CSS 등의 마크업 속성과 뷰 인스턴스에서 정의한 데이터 및 로직을 연결하여 사용자가 브라우저에서 볼 수 있는 형태의 HTML로 변환해 주는 속성이다.

 

우리가 컴포넌트를 만들때 작성한 template이 그 예시이다.

new Vue({
                template: "<div>Hello This is Template</div>",
            }).$mount("#app");

 

여기서 템플릿 속성에 대해 한가지 알아둬야 할 특징이 있는데 사용자는 볼 수 없지만 라이브러리 내부적으로 template속성에서 정의한 마크업 + 뷰 데이터를 가상 돔 기반의 render()함수로 변환한다.

 

render()함수는 최종적으로 사용자가 볼 수 있게 화면을 그리는 역활을 한다.