Vue - todo list

Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex을 보고 어제 todo list를 만들어보았고, 오늘 코드를 안보고 다시 처음부터 만들어보았다.

• 리포
• demo

vue directives

• v-bind: 내려보낼 props 속성 이름="현재 위치의 컴포넌트 데이터 속성"
• v-on: 하위 컴포넌트에서 발생시킨 이벤트 이름="현재 컴포넌트의 메서드명"
• this.$emilt('이벤트 이름', 인자1, 인자2..)

localstorage

• 처음으로 로컬스토리지를 사용해보았다. 싱기방기
• localStorage.setItem(todoItem, JSON.stringify(obj))
• localStorage.removeItem(todoItem.item)
• localStorage.clear()

구조

App과 TodoHeader, TodoInput, TodoList, TodoFooter 컴포넌트를 만들었다.
App이 container로서의 기능을 하고 나머지 컴포넌트들이 presentational 컴포넌트로 작동하도록 짰다.

vue bootstrap

• 부트스트랩도 처음 써봤다.