[vue] 공부하기 앱 생성 후 마운트

어플리케이션 생성하고 및 마운트 하기(시작하기)

 

import { createApp } from 'vue'
 		
const app = createApp({

 		})

기존에는 new Vue 생성자 함수를 만들어서 활용했으나 이제는 3.0부터는 위에 것을 활용하여 사용한다.

• createApp을 통해서 컴포넌트를 만들게 되는데, 최상위 컴포넌트를 만들 수 있다.

import { createApp } from 'vue'
 		// 싱글 파일 컴포넌트에서 최상위 컴포넌트 앱을 가져온다
import App from './App.vue'
const app = createApp(App)
웹팩을 이용하여 vue를 사용하는 경우에 활용할 수 있다.

• 어플리케이션을 생성한다고 해도 그 자체로 활용할 수 없다. 마운트를 통해서 사용할 수 있다.

즉 변수를 정의 하는 과정이 어플리케이션을 생성하는 행위의 총체라고 한다면 마운트는 선언하는 것이다. 선언을 통해서 우린 html 상에서 vue를 활용할 수 있다.

 	<div id="app"></div> = > html에서 사용하는 경우
 	app.mount('#app') => js에서 사용하는 경우

• vue 2 에서는 new Vue 와 el 속성을 사용해서 앱을 생성하고 마운트 했다. 그러나 이제는 위와 같이 쓰도록 하자. 바뀐 이유? vue3에서 더욱 모듈화 되기 때문.

• 어플리케이션 인스턴스는 하나로 제한되진 않는다. 즉 어플리케이션을 여러개 만들어서 사용하는 것이 가능하다. 각각은 고유한 자신만의 공간을 가진다. 컴포넌트 위주의 조립식 사용이 vue의 매력 포인트.

         
     

 

 

 

 

 

 

템플릿 문법

 		메세지: {{ msg }}</span>
 		<p>텍스트 보간법 사용: {{ rawHtml }}</p>
 		<p>v-html 디렉티브 사용: <span v-html="rawHtml"></span></p>

• 이중 괄호는 html 속성에서 사용할 수 없다는 것을 잊지 말자
• <div v-bind:id="dynamicId"></div> 이와 같은 형태로 필요한 데이터를 바인딩 해주어야 한다.