5. TaskComponent 템플릿변경

TaskComponent.vue  파일

1. 버튼을 달아준다.

<template>

<div>

<button class="btn btn-primary btn-block">Add New Task</button>

</div>

</template>

<script>

export default {

mounted() {

console.log('Component mounted.')

}

}

</script>

2. 테이블 디자인

<template>

<div>

<button class="btn btn-primary btn-block">Add New Task</button>

<table class="table">

<thead>

<tr>

<th>id</th>

<th>Name</th>

<th>Body</th>

</tr>

</thead>

<tbody>

<tr>

<td></td>

<td></td>

<td></td>

</tr>

</tbody>

</table>

</div>

</template>

<script>

export default {

mounted() {

console.log("Component mounted.");

}

};

</script>