[Udemy Vue 완벽가이드 Section5] 63. 템플릿 이해하기

HTML 코드 당, 하나의 앱만 사용해야 한다.

Vue앱을 HTML코드의 DOM내 특정 위치에 마운트할때면, 해당 HTML 드 부분을 Vue앱의 템플릿으로 지정하게 된다. 

즉, 아래 부분이 첫번째 Vue앱의 템플릿이 되는 셈이다.

<section id="app">
 <h2>How Vue Works</h2>
  <input type="text" @input="saveInput">
  <button @click="setText">Set Text</button>
  <p>{{ message }}</p>
</section>

 

해당 섹션의 #app 선택자를 통해 마운트 되었다.

 

앱에서 템플릿을 정의하는 방법에는 여러가지가 있다.

HTML코드를 작성하고, 애플리케이션을 #app2에 mount하는 방식이 가장 쉽다. 하지만 template을 추가하는 유일한 방법은 아니다.

 

Vue앱에 템플릿을 추가할때, app configuartion object에 template option을 추가하여 사용할 수 있다.

const app2 = Vue.createApp({ //이 object가 app configuration object
 template: '',
 data() {
 },
})

이 template option은 string이 들어간다.

 

const app2 = Vue.createApp({
 template: `
 <p>{{ favoriteMeal }}</p>
 `,//multi-line으로 쓰고싶어 backtick사용
 data() {
 },
})

 

해당 섹션을 제어하도록 설정했으면, 그 안에 있는 모든 것이 template이다. 단지, template 정의하는 방법을 다르게 했을 뿐.

 <section id="app2"> //이 안에 있는 것들은 전부 template.
 </section>

 

여전히 app2.mount('#app2')는 필요하다. 그래야 favoriteMeal의 실제 값이 화면에 렌더링될 때, 어떤 위치에 템플릿이 표시되어야하는지 알 수 있기 때문. 마운트 작업이 없으면 Vue가 해당 문단을 어떤 페이지에 표시해야하는지 알 수 없다.

 

template option을 사용하지 않은, 이전 방식과 동일하게 출력된다. 단지, 템플릿을 정의하는 방식만 달라진 것.

굳이 이렇게 문자열 기반의 template을 쓸 필요는 없다.

이 방식을 통해서도 Vue앱을 통해 제어되는 HTML 부분의 모든 콘텐츠를 해당 앱의 템플릿으로 지정할 수 있다.