$ vue create vue-todoapp
각자 역할에 맞는 컴포넌트 파일 생성합니다.
파일명은 파스칼 표기법으로 작성 합니다.
이렇게 만들어진 컴포넌트는 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>
로고와 날짜가 들어간다
<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}