[Vue.js] 인프런의 캡틴판교님의 Todo 샘플 리팩토링 정리입니다.

아래의 내용은 인프런의 캡틴판교님의 강의를 정리한 내용입니다.

제 소스도 아니고, 무언가를 배우기 위해서는 직접 keyin 하는 방법이 좋기 때문에,

중요 소스는 죄송하지만 이미지 입니다.

---

정상동작합니다.

1. Todo List를 보여주는 방법

TodoList.vue 파일의 created Hook을 App.vue 으로 옮겼습니다.

props 기능 : 상위에서 하위로 데이터를 보내는 기능

2. TodoList 등록하는 방법

TodoInput.vue 파일의 addTodo 기능을 App.vue 으로 옮겼습니다.

$emit 기능 : 하위에서 상위로 데이터를 보내는 기능

3. TodoList 삭제 및 Toggle 방법

하위에서 상위로 데이터를 보내기 때문에 역시 $emit 기능 입니다.

4. 전체 삭제 기능

하위에서 상위로 데이터를 보내기 때문에 역시 $emit 기능 입니다.

---

props 와 $emit 기능에 대해 배웠습니다.

Vue.js는 내용이 어렵지는 않지만, 생소한 용어와 방식이라 접근이 쉽지 않네요. 아직까지는... ^^;;

---

추가기능

1. Modal - slot

아래와 같은 Modal 창을 오픈 합니다.

 

 

2. Transition 효과