Vue.js - SFC란

Single-File Components란

 

Vues 컴포넌트( components)들은 HTML과 유사한 형태인 Single-File-Component(=SFC) 포맷으로 쓰여진다. ( 결과 파일 : .vue )

 

* SFC란

 

하나의 file에 3가지 요소가 공존하는 format 입니다.

1. component의 로직( JavaScript )

2. template ( HTML )

3. styles ( CSS)

 

Vue component를 사용할때 추천,사용 되는 방법

 

SFC 포맷 예시

<script>
export default{
	data() {
    	return {
        	level: 0
        }
    }
}
</script>

<template>
	<button @click="level++">Level is: {{ level }}</button>
</template>

<style scoped>
button {
	font-weight: bold;
}
</style>

 

참고 : vue 공식 홈페이지

https://vuejs.org/