vue.js48 12장 04. 정리 컴포넌트를 작성해서 표시할 때 1. 직접 만든 컴포넌트의 태그명 사용 2. Vue 인스턴스로 사용하는 컴포넌트 오브젝트 작성 let Mycomponent = { template: 'Hello' } 3. Vue 인스턴스로 components: 에 프로퍼티를 준비하고 컴포넌트 오브젝트 입력 components: { 'my-component': MyComponent } 데이터를 사용하는 컴포넌트를 만들어서 표시할 때 1. 직접 만든 컴포넌트의 태그명 사용 2. 데잍터를 사용할 컴포넌트 오브젝트 작성. 이때 data: 는 function을 사용해서 작성 let MyComponent = { template: '카운터 추가{{ count }}', data: function(){ return { count: 0 } .. 2023. 5. 29. 12장 03. 값 전달 : props 보호되어 있는 글 입니다. 2023. 5. 23. 12장 02. 컴포넌트의 data를 function으로 만들기 보호되어 있는 글 입니다. 2023. 5. 23. 12장 01. 부품으로 정리한다 : 컴포넌트 보호되어 있는 글 입니다. 2023. 5. 22. 11장 04. 정리 ToDo 리스트의 각 행의 데이터는 "완료되었는지(done)"와 "할일 문자열(text)"로 구성된 오브젝트 데이터로 만든다. 이런 복수의 데이터를 배열로 만들어 준비하고, 배열 데이터의 각 행을 v-for로 반복 표시 구현한다. 각 행의 맨앞에 done와 결합한 체크박스를 붙이고 그 뒤에 text를 표시한다. 취소선을 표시하는 스타일을 붙이고 done이 true일 때만(체크된 경우) 스타일 유효하도록 한다. 실습해봅시다. 좀더 좋아진 ToDo리스트 ToDo List를 좀더 확장해 봅시다. 리스트에 완료기한을 입력할 수 있게 추가, 완료기한 미입력시 기본 현재 날짜 + 1일로 자동 입력 현재일 기준에서 완료기한을 지난 할 일은 1일 단위로 연장 기능 추가 할일/완료기한으로 정렬 기능 추가 Todo의 총건.. 2023. 5. 22. 11장 03. 개선 : 추가 & 삭제 보호되어 있는 글 입니다. 2023. 5. 22. 이전 1 2 3 4 5 6 ··· 8 다음