Vue Todo List
j2kb에서 vue 중급 서브젝트를 하게 되었다.
첫주차는 간단하게 todo list를 만들어보기로 했다.
vanilla javascript로 구현한다고 생각하면
- 인풋 박스에 값을 입력하고, 엔터를 누르거나 추가 버튼을 클릭하면 input의 값이 아래 list로 렌더링되게 한다.
- 각 리스트는 지울 수 있는 button도 있어서, button을 누르면 그 버튼에 해당하는 list item이 삭제된다.
- 이 방식은 dom을 직접적으로 건드려야 한다.
- 하지만 vue는 가상돔이 있고 데이터를 다루는 이론이 따로 있기 때문에, 다른 방식으로 구현해야함을 느꼈고, 이는 vue가 나타난 배경과 데이터를 다루는 특성, 그에 따라 생겨난 vue의 문법 등을 고려해야겠다고 생각했다.
환경설정
- vue3
- vue cli로 프로젝트 생성
- codesandbox
- github
- bootstrap
폴더 구조
.
├─ README.md
├─ package.json
├─ public
│ └─ index.html
└─ src
├─ main.js
├─ App.vue
├─ components 컴포넌트
│ ├─ TodoList.vue
│ └─ ...
├─ images 이미지
├─ fonts 폰트
└─ assets 기타 자원App.vue에 세팅을 해보자
<template>
<TodoList />
</template>
<script>
import TodoList from "./components/TodoList.vue";
export default {
name: "App",
components: {
TodoList: TodoList,
},
};
</script>
<style>
</style>TodoList.vue
- todolist 작업을 시작해보자.
- todo list를 입력할 input창을 만들어주고, 버튼을 클릭했을 때 input에 입력한 텍스트를 콘솔에 출력할 수 있게끔 작업을 했다.
<template>
<div>
<h1>to do list</h1>
<form action="">
<input ref="input" type="text" placeholder="Enter the to do!" />
<button @click="add" type="button">추가</button>
</form>
<ul>
<li></li>
</ul>
</div>
</template>
<script>
export default {
name: "TodoList",
props: {
msg: String,
},
methods: {
add() {
console.log(this.$refs.input);
},
},
};
</script>- 하지만 이렇게 작업했을 때에는 input의 속성이 반영되지 않고 콘솔에 출력된다.
- 양방향 데이터 바인딩이 되지 않는것이다.
- 그렇기 때문에 다음 코드처럼
v-model을 사용해 데이터를 바인딩해준다. - 그러면 input에 작성한 데이터가 실시간으로
p태그에 렌더링되어 나타난다.
<template>
<div>
<h1>to do list</h1>
<form action="">
<input v-model="myInput" type="text" placeholder="Enter the to do!" />
<button @click="add" type="button">추가</button>
</form>
<p>{{ myInput }}</p>
</div>
</template>
<script>
export default {
name: "TodoList",
data() {
return {
myInput: "",
};
},
props: {
msg: String,
},
};
</script>
여기서 잠깐!
data() {}과,data {}의 차이
- data를
data {}해서 쓰게 되면 에러가 나고data() {}해서 쓰면 에러가 사라진다. - 이유: 하단의 url참고
- 참고url
vue3 에서 eventbus가 안되는 이슈
vue3는 bootstrap vue 가 되지 않는다. 그래서 bootstrap vue-3를 써야 한다.
hidden text 작업
.terms_area .hidden {
position: absolute!important;
width: 1px;
height: 1px;
margin: -1px;
clip: rect(0,0,0,0);
overflow: hidden;
color: transparent
}참고
'Work > portfolio' 카테고리의 다른 글
| [힘 있는 포트폴리오에서 필요한&피해야 하는 3가지] (0) | 2022.07.04 |
|---|