[Vue 3] SFC 문법

🔍 SFC 문법

📍 개요

*.vue 파일 확장자를 사용하는 SFC(Vue 싱글-파일 컴포넌트)는 HTML과 유사한 문법을 사용함

Vue 컴포넌트를 설명하는 커스텀 파일 형식

세 가지 유형의 최상위 언어 블록(<template>, <script>, <style>)과 선택적으로 추가 커스텀 블록으로 구성됨

ex)

<template>
  <div class="example">{{ msg }}</div>
</template>

<script>
export default {
  data() {
    return {
      msg: '안녕 Vue!'
    }
  }
}
</script>

<style>
.example {
  color: red;
}
</style>

<custom1>
예를 들어 컴포넌트 설명서가 될 수 있습니다.
</custom1>

---

📍 언어 블록

✅ <template>

*.vue 파일은 최상위 <template> 블록 하나만 포함할 수 있음!!

컨텐츠는 추출되어 @vue/compiler-dom으로 전달됨
JavaScript 렌더 함수로 사전 컴파일되며, 내보낸 컴포넌트에 render 옵션으로 첨부됨

✅ <script>

*.vue 파일은 하나의 <script> 블록만 포함할 수 있음!!
<script setup> 제외

스크립트는 ES 모듈로 실행됨

기본 내보내기는 일반 객체 또는 defineComponent의 반환 값으로 Vue 컴포넌트 옵션 객체여야 함

✅ <script setup>

*.vue 파일은 하나의 <script setup> 블록만 포함할 수 있음!!
일반 <script> 제외

스크립트는 전처리되어 컴포넌트의 setup() 함수로 사용됨 => 컴포넌트의 각 인스턴스에 대해 실행됨

<script setup> 내에 최상위 바인딩은 템플릿에 자동으로 노출됨

✅ <style>

*.vue 파일에는 여러 <style> 태그가 포함될 수 있음

<style> 태그는 현재 컴포넌트에 스타일을 캡슐화하는 데 도움이 되도록, scoped 또는 module 속성을 가질 수 있음

캡슐화 모드가 다른 여러 <style> 태그를 동일한 컴포넌트에 혼합할 수 있음

✅ 커스텀 블록

프로젝트별 요구 사항에 따라 *.vue 파일에 추가 커스텀 블록을 포함할 수 있음

ex)
Gridsome: <page-query>
vite-plugin-vue-gql: <gql>
vue-i18n: <i18n>

---

📍 주석

각 블록 내에서 사용 중인 언어(HTML, CSS, JavaScript, Pug 등)의 주석 문법을 사용해야 함

최상위 주석 => HTML 주석 문법을 사용

---

📒 참고 문서

공식문서