SFC 는 뷰의 컴포넌트를 따로 분리하는 기법입니다.
확장자는 *.Vue 이고, script, template, style 태그로 구성되어 있습니다. script, style 태그는 흔히 알고 있겠지만, template 태그는 대체로 잘 사용되지 않는 태그 입니다.이 태그는 querySelector 로 속이 검색되지 않으며 브라우저에 바로 표시가 되지 않습니다. 주로 html 태그 조각을 담아두는 데 사용이 됩니다. template 태그 대신 div나 일반 태그에 담고 감춰두면 되지 않을까 라고 생각되시는 분들도 있으시겠지만, tr, td 같은 태그들은 template가 아니면, 넣어두고 꺼낼 수가 없습니다.
구조는 아래와 같습니다.
<script>
export default {
data() {
return {
greeting: 'Hello World!'
}
}
}
</script>
<template>
<p class="greeting">{{ greeting }}</p>
</template>
<style>
.greeting {
color: red;
font-weight: bold;
}
</style>
이 모듈화 된 컴포넌트를 꺼내어 쓰려면, 아래와 같이 사용하면됩니다.
import MyComponent from './MyComponent.vue'
export default {
components: {
MyComponent
}
}
'Vue.js' 카테고리의 다른 글
| Vue.js install (0) | 2023.01.02 |
|---|
