프로젝트 구상

• header : 웹앱 이름과 오늘 날짜를 보여줍니다
• title : 몇 개의 할 일이 남았는지 보여줍니다
• input : 할 일을 입력받습니다
• controller: 필터와 모두 삭제 기능이 들어 있습니다
• list : 할 일 목록을 보여줍니다
• footer : 카피라이트가 들어갑니다
• modal : 할 일을 입력하지 않은 상태일 때 안내문을 보여줍니다
  또, 아래 상황에 맞춰 서로 다른 내용을 보여줘야하는 컴포넌트도 있습니다.
• title : 최초 진입 시 이름을 묻는 화면이 표시됩니다
• emptyList : 아무런 리스트가 없을 때 표시됩니다

1. 프로젝트 생성

$ vue create vue-todoapp

2. Git 저장소 연결

• 레파지토리 생성
• Git 레파지토리와 VS와 연결

3. 컴포넌트 파일 생성

각자 역할에 맞는 컴포넌트 파일 생성합니다.
파일명은 파스칼 표기법으로 작성 합니다.

이렇게 만들어진 컴포넌트는 App에 연결합니다.
App.vue파일에 import TodoTitle from './components/TodoTitle'; 와 같이 파일을 입포트 해줍니다.
그런 다음 components:{} 에 하나씩 넣어줍니다.

<!-- App.vue -->
<template>

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

</template>

<script>
import TodoControllorer from './components/TodoControllorer.vue';
import TodoFooter from './components/TodoFooter.vue';
import TodoHeader from './components/TodoHeader.vue';
import TodoInput from './components/TodoInput.vue';
import TodoList from './components/TodoList.vue';
import TodoTitle from './components/TodoTitle.vue';

export default {
 name:'App',
 components:{
  TodoControllorer,
  TodoFooter,
  TodoHeader,
  TodoInput,
  TodoList,
  TodoTitle,
 }
}
</script>

<style>

</style>

4.컴포넌트 마크업

TodoHeader.vue 마크업

로고와 날짜가 들어간다

<template>
  <header class="header">
    <h1 class="logo">vueTodo</h1>
    <p class="date">{{ timestamp }}</p>
  </header>
</template>

<script>
export default {
  data() {
    return{
      timestamp:""
    }
  },
  mounted(){
    const now = new Date();
    const month = now.getMonth() + 1;
    const date = now.getDate();
    const weekList = new Array("sun","mon","tue","wed","thu","fri","sat");
    const week = weekList[now.getDay()];
    this.timestamp = `${month}/${date}.${week}`

  },

};
</script>

<style>

</style>

data()에 timestamp 데이터를 넣고 mounded() 에 날짜 스크립트 추가을 이용하여 한번에 작성

문자열 리터럴

백틱을 사용하면 문자열 변수 한번에 사용가능
this.timestamp = ${month}/${date}.${week}