[Vue] SFC(Single File Component)

SFC(Single File Component)

확장자가 ".vue"인 파일이다. vue cli에서 사용한다.

.vue 파일에서는 template, script, style을 모두 합쳐서 작성할 수 있다. 

구문 강조가 가능하고, <style scoped>를 사용해 컴포넌트에만 css범위를 제한할 수 있다.

전처리기를 사용해 기능의 확장이 가능하다.

template

기본언어는 html이다. 

각 .vue 파일은 한번에 최대 하나의 <template>블록을 포함할 수 있다.

template는 무조건 하나의 루트 엘리먼트를 포함해야 한다. 

내용은 문자열로 추출(``)되어 컴파일된 Vue Component의 template옵션으로 사용된다.

script

기본언어는 javascript다.

각 .vue 파일은 한 번에 최대 하나의 <script>블록을 포함할 수 있다.

ES6을 지원해 import와 export를 사용할 수 있다. (앞서서 설치한 Babel 모듈이 ES6를 지원하지 않는 브라우저는 ES5버전으로 바꿔서 서비스한다.)

style

각 .vue 파일은 여러 개의 <style>태그를 지원한다.

scoped 속성을 이용해 현재 컴포넌트에서만 사용가능한 css를 지정가능하다.