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

# 여러 Vue앱 사용시 주의할 점

여러 Vue앱을 사용해서 HTML코드의 여러 부분을 제어할 수 있다.

 

하지만 몇가지 주의할 점이 있다.

- HTML 코드에서 동일한 부분을 여러 앱에서 제어해서는 안된다.

- 하나의 앱으로 HTML 코드의 여러 부분을 제어하는 것도 안된다.

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

 

 

# template

'HTML 부분'이나 '제어되는 HTML'이라는 말은 정확하진 않지만, 직관적인 표현이라 계속 사용하고 있었다.

공식 명칭은 'template'.

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

 

예를 들어, 이 <section id="app">...</section> 부분이 첫번째 Vue앱의 template이 되는 셈이다.

위 section의 #app 선택자를 통해 mount되었다.

<!--index.html-->
<section id="app"> <!--첫번째 Vue앱의 template-->
  <h2>How Vue Works</h2>
  <input type="text" @input="saveInput" />
  <button @click="setText">Set Text</button>
  <p>{{ message }}</p>
</section>
 
<section id="app2"> <!--두번째 Vue앱의 template-->
  <p>{{ favoriteMeal }}</p>
</section>

 

//app.js
const app = Vue.createApp({
  data() {
    return {
      currentUserInput: "",
      message: "Vue is great!",
    };
  },
  methods: {
    saveInput(event) {
      this.currentUserInput = event.target.value;
    },
    setText() {
      this.message = this.currentUserInput;
    },
  },
});
app.mount("#app");


const app2 = Vue.createApp({
  data() {
    return {
      favoriteMeal: "Pizza",
    };
  },
});
app2.mount("#app2");

 

# template을 정의하는 방법

Vue앱에서 template을 정의하는 방법에는 여러가지가 있다. 

 

1/ HTML 코드를 작성하고, Vue앱을 그 코드에 마운트 하는 방식.

위의 방법이고, 가장 흔하고 간편하다.

하지만, template을 추가하는 유일한 방법은 아니다.

 

2/ template 옵션 사용

앱 구성 객체에 template 옵션을 사용한다. 

template 옵션에는 문자열이 들어가는데, 여러 줄의 문자열을 작성할 경우 백틱을 사용한다.

const app2 = Vue.createApp({
 template: `
  <p>{{ favoriteMeal }}</p>
 `
})

 

이렇게 두 번째 앱의 template이 완성되었다.

해당 section을 제어하도록 설정했으면(mount), 그 안에 있는 모든 것이 template이다. 단지 template을 정의하는 방식만 달라졌을 뿐.

ex: <section id="app2">... </section> 이 부분 

 

여전히 app2.mount를 통해 mount하는 작업은 필요하다. 그래야 Vue앱이 favoraiteMeal의 실제 값이 화면에 렌더링될 때 어느 위치에 template이 표시되어야 하는지 알 수 있기 때문.

mount작업이 없다면, Vue가 <p>(template)을 어떤 페이지에 표시해야 하는지 알 수 없다.

 

template 옵션을 사용해도 이전과 동일하게 출력된다.

단지 template을 정의하는 방식만 달라졌다.

실제로는 template 옵션 사용보다는, HTML코드를 작성하고 mount하는 기존 방식을 더 많이 사용한다.

훌륭하고 이해도 쉽기 때문.

 

 

** 출처: 모든 내용은 Udemy Vue-완벽가이드 강의를 기반으로 작성하였습니다.