기본 구조

기본 구조

Vue application의 기본 구조를 살펴본다. 아래 페이지에 작성된 코드를 기준으로 설명한다.

pageCDN(Vue3)

제어 영역 지정

VueJS는 HTML 문서의 특정 영역을 지정하여 사용한다. 기본적인 예제에서는 하나의 Vue app이 하나의 영역을 담당하므로 id를 식별자로 사용하였으나, class로 하거나 기타 다른 선택자를 사용할 수 있다.

<div id="app">

</div>

Vue CDN

VueJS를 사용하기 위해서는 필요한 의존성을 불러와야 하며, 다양한 방법들이 존재한다. 여러 방법 중 가장 간편하게 사용할 수 있는 CDN을 사용하며, 공식 문서에 나와 있는 unpkg에서 제공하는 CDN을 사용한다.

<script src="https://unpkg.com/vue@next"><script>

위의 CDN을 사용할 경우 Vue Devtools를 이용한 개발용 테스트 등이 가능하다. 만약 배포용으로 CDN을 사용하고 싶을 경우 다음과 같이 CDN을 작성한다.

<script src="https://unpkg.com/vue@next/dist/vue.global.prod.js"></script>

버전을 지정하고 싶은 경우 next 자리에 버전을 작성한다(학습용도 마찬가지)

<script src="https://unpkg.com/vue@3.2.27/dist/vue.global.prod.js"></script>

Vue Application 생성

제어 영역에 연결할 Vue application을 다음과 같이 생성한다.

<script>
const app = Vue.createApp({
    
});
app.mount("#app");
</script>

Vue 전역 객체의 createApp 함수를 이용하여 앱을 생성하며, 옵션을 추가하여 필요한 정보들을 알려준다.

생성된 앱을 mount 함수를 이용하여 작성한 선택자와 일치하는 영역에 할당하면 기본 application 구현이 완료된다.

백그라운드 데이터 생성

Vue 제어 영역에 표시하기 위한 백그라운드 데이터를 Vue application 내부에 생성한다.

const app = Vue.createApp({ 
    data(){
        return {
            text : "Welcome to Vue JS 3!"
        };
    }
});
app.mount("#app");

Template Rendering

VueJS에서는 출력을 위한 다양한 형태의 템플릿 문법을 지원하며, 그 중 Mustache(이중 중괄호 구문)으로 출력을 시도하였다.

<h1>{{text}}</h1>

{{text}}는 Vue application 실행 이후 data 함수에서 반환하는 객체 내부의 text 값으로 치환된다. 따라서 일시적으로 화면에 {{text}} 글자가 표시될 수 있다.

템플릿 출력 구문은 반드시 「제어 대상」 영역 내에서 사용해야 한다. Vue application에서 지정한 제어 대상 영역이 아닐 경우 렌더링되지 않는다.