Vue.js : 템플릿 이해하기

Vue.js : VueJS 템플릿 이해하기

 

HTML

<script src="https://unpkg.com/vue/dist/vue.js"></script>

<div id="app">
	<p>{{ title }}</p>
</div>

 

 

Java Script

new Vue({
	el: '#app',
	data: {
		title: 'Hello World!'
	}
})

 

 

출력 결과

 

 

아주 간단한 프로젝트입니다. 제목을 출력하고 제목은 단순히 hello world입니다. 모듈로 다른 텍스트를 출력하며, 이벤트는 따로 없습니다.

왜냐하면 시작하려는 것은이 vue 인스턴스와 이 html 코드 사이의 연결에 대해 알아보기 위함입니다. 이러한 연결이 있다고 설명하기 전에 한 가지 중요한 것이 있기 떄문입니다.

이 새로운 vue js 인스턴스를 만들어서 강조하고 싶은 것은 변수에 저장하지 않는다는 점에 유의해야 합니다.

이 인스턴스를 인스턴스화하여 생성하지만 vue js는 이 연결을 만들고 vue js는 이 HTML 코드를 가져옵니다. vue js는 런타임을 추가하지 않고 html 코드를 사용하며 html 코드에 이러한 명령을 가지고 있음을 이해하는 것이 중요합니다.

여기서 이 hello world 텍스트를 검사하면 실제로 볼 수 있습니다. 물론 우리에게는 hello world만 있고, 중괄호는 보이지 않으며, vue js에 의해 추가된 다른 코드도 없고, 어떤 마법이 진행될 것이라는 숨겨진 힌트도 전혀 없습니다.

Vue js는 hmtl 코드를 기반으로 템플릿을 만들고 내부적으로 저장한 다음 기본적으로 이 템플릿을 사용하여 실제 HTML 코드를 생성하여 DOM으로 렌더링합니다. 이것은 템플릿 구문을 사용할 수 있기 때문에 이해하는 것이 중요합니다.

이 과정에서 알아볼 다른 것들, 결국 브라우저에서 실행되는 것이 아니기 때문에 작성한 html 코드에서, 중간에 이 레이어가 있고 이 레이어는 html code를 가져와서 템플릿을 생성하는 vuejs 인스턴스입니다.

예를 들어 제목을 입력하여 이 템플릿을 렌더링한 다음 여기에 렌더링되는 최종 html 코드를 출력합니다. 이미 알고 있었을 수도 있지만 그렇지 않은 경우 코드를 작성할 수 있었던 이유를 이해하는 것이 중요합니다.

이를 통해 vuejs를 사용하여 이 템플릿 접근 방식을 통해 dom과 상호 작용할 수 있는 방법에 대해 자세히 알아 보겠습니다.