08. 싱글 파일 컴포넌트 체계(Single File Components)

  싱글 파일 컴포넌트 체계란 .vue 파일로 프로젝트 구조를 구성하는 방식을 말합니다. 확장자 .vue 파일 1개는 뷰 애플리케이션을 구성하는 1개의 컴포넌트와 동일합니다.

 

.vue 파일의 기본 구조

<template>
  <!-- HTML 태그 내용 -->
  <!-- 화면에 표시할 요소들을 정의하는 영역 (HTML + 뷰 데이터 바인딩) -->
</template>

<script>
export default {
  // Javascript
  // 뷰 컴포넌트의 내용을 정의하는 영역 (template, data, methods 등)
}
</script>

<style>
  /* ★. <style scoped> : scoped는 뷰에서 지원하는 속성, 스타일 정의를 해당 컴포넌트에만 적용 */
  /* CSS 스타일 내용 */
  /* 템플릿에 추가한 HTML 태그의 CSS 스타일을 정의하는 영역 */
</style>

 

[참고]

  > Vetur 버전 0.22부터 싱글 파일 컴포넌트 생성 단축키가 'scf'에서  'vue'로 변경 (Visual Studio Code에서 자동 완성)