Vue Templates

Vue Templates란?

HTML, CSS 등의 속성과 뷰 인스턴스에서 정의한 데이터 및 로직들을 연결하여 사용자가 브라우저에서 볼 수 있는 형태의 HTML로 변환해주는 속성.

 

따라서, Vue로 그리는 화면의 요소들, 함수, 데이터 속성은 모두 Templates  안에 포함된다.

 

그래서 Vue Template? 이라고 말하면 낯설겠지???

 

우리는 이제껏 많이 template를 많이 사용해봤다.

 

아래 두 가지 코드를 확인해보자.

 

예제 1)
<script>
  new Vue=({
     template : '<p>Hello {{ message }}</p>'
  });
</script>

 

예제 2)
<div id='app'>
</div>

...

<script>
  new Vue=({
     el : '#app',
     data: {
       message : 'Hello Vue.js!'
     },
     template : '<h5>{{ message }}</h5>'
  });
</script>