[Age of Vue] Vue.js 시작하기 - 30. 싱글 파일 컴포넌트 생성하여 배운 내용 적용해보기 (1)

 

AppHeader.vue 컴포넌트를 만들어서 App.vue에서 사용해보자

---

AppHeader.vue

<!-- 컴포넌트는 대문자로 시작하는 최소 두 단어로 조합 (html 기본 태그와 헷갈릴 수 있으므로)-->
<template>
  <header>
      <h1>Header</h1>
  </header>
</template>

<script>
export default {

}
</script>

<style>

</style>

 

App.vue

<template>
  <!-- template에는 html element가 최상위 1개만 있어야한다 -->
  <div>
    {{ str }}
    <app-header></app-header>
  </div>
</template>

<script>
import AppHeader from './components/AppHeader.vue'

export default {
  data : function() {
    return {
      str : 'hi'
    }
  },
  components : {
    //내가 정의한 컴포넌트 변수 : 내가 정의한 import 변수
    'app-header' : AppHeader
  }
}
</script>

<style>
</style>

---