싱글 파일 컴포넌트 체계

싱글 파일 컴포넌트 체계?

.vue 파일로 프로젝트 구조를 구성하는 방식을 말한다. 확장자 .vue 파일 1개는 뷰 어플리케이션을 구성하는 1개의 컴포넌트와 동일하다.

구조
<template>
  // HTML 태그 내용
</template>

<script>
export default {
  // 자바 스크립트 내용
}
</script>

<style>
  // css 스타일 내용
</style>

 

ex
<template>
	<div>
    	<span>
        	<button>{{ message }}</button>
        </span>
    </div>
</template>

<script>
export default {
	data: {
    	message: 'click this button'
    }
}
</script>

<style>
	span {
    	font-size: 1.2em;
    }
</style>