24. mounting the vue instance

내용

이 글은 고급 기능인 사이클 함수, 가상 DOM, 컴포넌트에 대해 다루기 전에 뷰 인스턴스를 마운트하는 방법에 대해 설명합니다.
뷰 인스턴스가 문서에 삽입되는 과정을 '마운트'라고 하며, 이는 애플리케이션을 사용자에게 표시하는 과정을 의미합니다.
때로는 애플리케이션을 즉시 마운트하지 않고 다른 모듈을 먼저 로드하거나, 렌더링할 요소가 처음에 사용 가능하지 않을 경우에 마운트를 지연시킬 수 있습니다.
예를 들어, 특정 요소가 나타난 후 3초 뒤에 setTimeout 함수를 사용하여 마운트하는 방법을 설명합니다.
마운트 메소드는 앱 생성 후 언제든지 호출할 수 있으며, 이는 애플리케이션을 필요할 때 언제든지 표시할 수 있는 유연성을 제공합니다.
대부분의 경우 애플리케이션을 즉시 마운트하겠지만, 필요할 때 다른 방법을 사용할 수도 있다는 것을 알아두는 것이 좋습니다.

index.html

<!DOCTYPE>
<html>

<head>
    <title>VueJS Course</title>
    <link rel="stylesheet" type="text/css" href="main.css" />
</head>

<body>
<div id="app">
    {{ message }}
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/3.4.9/vue.global.min.js"></script>
<script src="app.js"></script>
</body>

</html>

app.js

let vm = Vue.createApp({
  data() {
    return {
      message: "Hello world!",
    }
  }
});

setTimeout(() => {
  vm.mount('#app');
}, 3000)

main.css

body{
  font-size: 20px;
  font-family: sans-serif;
}
.red{
  color: red;
}

# 24. mounting the vue instance

# 내용

24. mounting the vue instance

내용