Single File Components 체계

<Do it! Vue.js 입문>을 기본으로 배운 내용입니다.

 

참고하면 좋을 게시물 

kr.vuejs.org/v2/guide/components.html

 

---

<뷰 프로젝트 구성>

1. Single File Components 체계

.vue 파일로 프로젝트 구조를 구성하는 방식 (.vue 파일 1개 = 컴포넌트 1개)

 

 

1)  .vue 파일의 기본 구조

<template>
  <!-- HTML 태그 내용 -->
</template>

<script>
  export default{
    //자바스크립트 내용
  }
</script>

<style>
  <!-- CSS 스타일 내용 -->
</style>

 

ex) "컴포넌트명.vue" 파일

<template>
  <div>
    <span>
      <button>{{message}}</button>
    </span>
  </div>
</template>

<script>
  export default{
    data:{
      message: 'click this button'
    }
  }
</script>

<style>
  span{
    font-size: 1.2em;
  }
</style>

 

2. 컴포넌트 생성하고 등록하기

1) 컴포넌트 생성

1. 프로젝트 폴더의 src폴더 밑에 components폴더 생성
2. components폴더 안에 "컴포넌트명.vue"파일들을 컴포넌트별로 생성해준다.
3. .vue파일 안에 코드는 아래와 같이 모두 작성해준다.

 

 

<template>
  <div>header</div>
</template>

<script>
export default {
  components: {}
};
</script>

<style></style>

 

2) 컴포넌트 등록

• 애플리케이션에서 사용할 컴포넌트들은 모두 최상위 컴포넌트인 App.vue에 등록해야한다.
• src/App.vue파일의 기존 코드 내용을 모두 지우고 아래와 같이 등록해주면 된다.

<template>
  <div id="app">
    <TodoHeader></TodoHeader>
    <TodoInput></TodoInput>
    <TodoList></TodoList>
    <TodoFooter></TodoFooter>
  </div>
</template>

<script>
//특정 컴포넌트에서 다른 위치에 있는 컴포넌트의 내용 불러오기
import TodoHeader from "./components/TodoHeader.vue";
import TodoInput from "./components/TodoInput.vue";
import TodoList from "./components/TodoList.vue";
import TodoFooter from "./components/TodoFooter.vue";

//지역 컴포넌트 등록
export default {
  components: {
    TodoHeader: TodoHeader,
    TodoInput: TodoInput,
    TodoList: TodoList,
    TodoFooter: TodoFooter
  }
};
</script>

<style></style>