[Udemy Vue 완벽가이드 Section5] 62. 하나의 앱 vs 여러 앱

페이지 당 하나의 Vue앱만 설정이 가능한지 궁금할 수 있다.

 

지금까지는 HTML 코드에서 해당 앱이 제어할 부분에 마운트 하는 방식을 통해 하나의 Vue 앱만 사용했었다. 

하지만 여러 개의 Vue앱을 사용하는 것도 가능하다.

그리고, 다른 Vue앱도 첫번째 Vue 앱에서 했던 것과 동일한 작업을 할 수 있다.

//app.js
const app2 = Vue.createApp({
  data() { //data 객체 반환
    return { //data 프로퍼티 가질 수 있다.
      favoriteMeal: "Pizza",
    };
  },
});
app2.mount("#app2");

 

그리고 이를 두 번째 앱에 해당하는 section에서 출력시킬 수 있다.

<!--index.html-->
<section id="app2">
 <p>{{ favoriteMeal }}</p>
</section>

 

두 번째 앱이 제어하는 <section id="app2">에서는 첫 번째 Vue앱의 data 프로퍼티인 message를 출력할 수 없다.

message는 두 번째 Vue앱의 data 프로퍼티가 아니고, 첫 번째 Vue앱에 속하는 data 프로퍼티이므로.

 

각각의 Vue앱은 독립적으로 움직인다. Vue앱들 사이에 연결고리가 있지 않다. HTML 코드에서 두 개의 서로 다른 부분이 연결고리가 없는 개별 앱을 통해 제어된다.

따라서, 서로 독립적인 부분을 화면에서 출력하려 할 때 이를 제어하기 위해 여러 Vue앱을 사용할 수 있다.

 

독립적이지 않고 서로 연결되어 움직여야하는 부분인 경우, 

예를 들면, 여기 input과 button이 연결되어 결과적으로 해당 문단에 따라 영향이 있는 경우, 해당 부분은 동일한 Vue앱으로 제어되어야 한다.

<!--index.html-->
<input type="text" @input="saveInput" />
<button @click="setText">Set Text</button>

//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')

 

 

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