Vue
Vue - TodoList 만들기 2
youngw77
2023. 3. 2. 09:51
1. Visual Studio Code에서 terminal을 연 후 vue create 폴더명으로 vue 프로젝트 만들기
2.자신에 사용한 vue 버전 설치하기
3.vue프로젝트 생성 후 해당 폴더로 이동해주기 cd todolist-p2
4.npm run serve로 vue프로젝트가 실행되는지 확인하기
5.todolist-p2 하위 디렉토리 src아래 App.vue에서 todoList와 테이블 생성하기
<template>
<div id="app">
<table>
<thead>
<tr>
<th>NO</th>
<th>TODO</th>
<th>DONE</th>
<th>EDIT</th>
<th>DELETE</th>
</tr>
</thead>
<tbody>
<tr v-for="todo in todoList" v-bind:key="'todo_' + todo.id">
<td>{{ todo.id }}</td>
<td>{{ todo.todo }}</td>
<td>{{ todo.done }}</td>
<td><button>edit</button></td>
<td><button>delete</button></td>
</tr>
</tbody>
</table>
</div>
</template>
export default {
name: 'App',
data(){
return{
todoList:[
{
id: 1,
todo: 'vue',
done: false,
delete: false
},
{
id: 2,
todo: 'react',
done: false,
delete: false
},
{
id: 3,
todo: 'angular',
done: false,
delete: false
},
]
}
}
}
6. 간단한 CSS입혀주기
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
table thead tr th{
height:30px;
background-color: black;
color:white;
}
table tbody tr td{
height:30px;
}
table tbody tr:nth-child(odd){
background-color: #cccccc;
}
</style>
