Single-File Components vue.js

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
  }
}