📍SFC 문법
- HTML과 유사한 구문을 사용하여 Vue 컴포넌트를 만드는 포맷
- *.vue 파일 확장자를 사용
- HTML문법을 그대로 사용 가능
.vue 파일의 최상단에는 아래 블럭들이 올 수 있음 (선택적으로 커스텀 블럭 사용 가능)
- <template>
- <script>
- <style>
예시
📍Language Blocks
<template>
- .vue 파일에서 최상단에 1개만 존재
- <template>에 작성한 내용은 @vue.compiler-dom에 전달되고,
- JS render 함수로 pre-compile된 후,
- export 되는 컴포넌트에 render 옵션으로 첨부됨
<script>
- .vue 파일에서 최상단에 1개만 존재 (<script setup> 과 별개로 카운트)
- ES Module 처럼 실행됨
- 내부에 default export를 작성할 수 있는데, 이때 반환값은 일반 객체 or defineComponent 의 반환값이어야 함 (Vue 컴포넌트 옵션 객체)
- 첫 import 시 1번만 호출됨
<script setup>
- .vue 파일에서 최상단에 1개만 존재 (노말 <script>와 별개로 카운트)
- pre-process되어 컴포넌트의 setup() 함수로 사용됨
- setup(): 컴포넌트의 각 인스턴스에 대해 실행되는 함수 (매 랜더링 마다)
- 최상단 바인딩은 <template> 에 자동으로 노출됨
<style>
- 여러개 사용 가능
- scoped, module 어트리뷰트 2가지 중에서 선택 가능
참고