Vue3 To do list 만들기 (1)

<template>

<div class ="container">
  <h1>TodoList</h1>
<form class="d-flex">

<div class="flex-grow-1 ">
<input class="form-control "
 type="text"
  v-model="todo" 
  placeholder="할일"
  >
</div>

<div>
  <button class="btn btn-primary" 
  @click="Submit">
  추가
</button>
</div>



</form>
</div>
</template>

<script>

import {ref} from 'vue'

export default {
setup()
{
  let todo= ref("");
  let todolist = ref([]);
  
  var  Submit = ()=>{
  }

  return {
    todo,Submit,todolist,
  }; 
}
}
</script>



<style>
.name{
  color: blueviolet;
}




</style>

기본 설정

bootstrap 을 사용하여 이쁘게 만들었다

---

todolist 배열에 넣기 위해서

이전 포스트에서 공부한 v-model을 활용하여

push 를 사용할것

var arr = ['a', 'b', 'c'];
arr = ['a', 'b', 'c', 'd']

arr.push('d');

(push 예시)

 

  var  Submit = ()=>{
  todolist.value.push({
    id: Date.now(),
    sbj:todo.value
  });

를 사용하면 v-model로 받아온 todo 값을  객체내 sbj로 넣을 수 있다

 

하지만 이대로는 금방금방 리프레쉬 되는데 이를 방지하기위해

 

  var  Submit = (e)=>{
    e.preventDefault();
    
  todolist.value.push({
    id: Date.now(),
    sbj:todo.value
  });

  }

e.preventDefault(); 로 새로고침 하는것을 막는다

<form
@submit.prevent="Submit" 
 class="d-flex">

form 안에 @submit.prevent로도 동일한 효과를 얻을 수 있다.

 

 

(1) Vue3로 Todo List 만들기 예제 코드

<template>

<div class ="container">
  <h1>TodoList</h1>
<form
@submit.prevent="Submit" 
 class="d-flex">

<div class="flex-grow-1 ">
<input class="form-control "
 type="text"
  v-model="todo" 
  placeholder="할일"
  >
</div>

<div>
  <button class="btn btn-primary">
  추가
</button>
</div>
</form>
{{todolist}}


</div>
</template>

<script>

import {ref} from 'vue'

export default {
setup()
{
  let todo= ref("");
  let todolist = ref([]);
  
  var  Submit = ()=>{
  todolist.value.push({
    id: Date.now(),
    sbj:todo.value
  });

  }

  return {
    todo,Submit,todolist,
  }; 
}
}
</script>

 내가 기억하려고 적다보니 글이 두서 없어서, 전체 코드도 첨부합니다.

코드보면 이해되실거에요 :3