Single File Component

SFC의 스펙과 다양한 기능

이런걸 몰라도 개발진행이 안되는건 아님

그러나 좋아보여서 소개함

vue에서 SFC 는

template script style

세개의 블록 (최상위 블록)

최상위 블록에서 하나만 가지고 있을 수 있음

커스텀 블록

i18n 블록 다국어를 지원할 때 사용한다.

script lang 속성을 사용하여 전처리기를 적용할 수 있음

대표적으로 ts를 사용할 수 있음.

src 파일을 사용하여 외부파일을 가져올 수 있음

css 기능

scoped

scoped 속성이 있는 경우 현재 컴포넌트에만 적용이 된다.

scoped를 적용할 시 post CSS 를 사용하여 변환이되는 것을 봐야한다. data 어쩌구 저쩌구 이렇게 그 특수한 속성에 css가 입혀짐

scoped를 없애면

module

style module 을 넣어주면

$style 을 통해 가져올 수 있고 이를 class에 적용할 수 있음

$style.red 라고 입력하면 가져올 수도 있음

style module=”classes” 이렇게 선언하면

classes 에서 가져올 수 있음.

v-bind

v-bind를 통해 css 값을 동적으로 변경할 수 있다.

<style>
.red{
  color: v-bind(color) !important
}
</style>

위와같이 넣어두고

// setup 안에서 
const color = ref('red');
return { color }

위와 같이 사용하면 color 가 red로 찍히는 것을 볼 수 있고 이렇게 변수로 변경을 해줄 수 있다.

script setup

이부분은 정말 좋은 부분이라 생각되어 뒤에서 제대로 준비했다함.