★ 컴포넌트 분할과 정의 재사용성, 테스트 용이성, 디버깅 편의성 등을 고려해 컴포넌트를 분할하는 것을 권장하고 있다. 한 번에 변경되는 데이터를 렌더링하는 UI 단위로 컴포넌트를 분할하는 편이 좋다. 데이터가 변경되는 단위로 컴포넌트를 세분화하면 해당 컴포넌트만 다시 렌더링하고 나머지 컴포넌트는 다시 렌더링 하지 않게 되어 보다 좋은 렌더링 성능을 제공할 수 있게 된다. 특히 반복 렌더링하는 부분은 반드시 별도의 컴포넌트로 작성하는것이 좋다. ■ 관리해야 할 데이터 todo는 InputTodo 컴포넌트의 로컬 데이터로 정의한다. 왜냐하면, 데이터가 관리할 만큼 중요하지 않으므로 데이터의 생명주기 관리가 필요하지 않기 때문이다. { todoList : [ { id : 1, todo : "자전거 타기", ..
★ 이벤트 처리 동적 UI는 HTML 요소에서 발생하는 이벤트 처리를 통해 구현되는 경우가 많다. Vue의 이벤트는 HTML, 자바스크립트에서 사용하는 이벤트를 준용해서 사용하기 때문이다. 1. 인라인 이벤트 처리 Vue에서의 이벤트 처리는 아래와 같이 주로 사용한다. v-on:[이벤트 이름]="표현식" 가장 많이 쓰이는 click 이벤트 예 v-on 디렉티브는 @로 줄여 쓸 수도 있다. v-onclick="test($event)" @click="test($event)" 금액 : 입금 출금 계좌 잔고 : {{ balance }} 2. 이벤트 핸들러 메서드 Vue 인스턴스에 등록한 메서드를 이벤트 처리 함수로 연결 이와 같이 복잡한 기능은 메서드를 미리 작성해두고, v-on 디렉티브로 참조해서 이벤트를 수..
Vue 인스턴스 Vue 인스턴스에서 제공되는 옵션을 붙여 개발 할 수 있다. el : id를 찾는 함수 data : 값을 넣을 데이터 {{ myText }} 2. 데이터 표시 {{데이터}} v-text : 프로퍼티 html에 표현할 때는 {{ 프로퍼티 이름}} 형식으로 표현 v-html : HTML로 표현 {{ myText }} v-text와 {{myText}는 프로퍼티 텍스트를 그대로 출력하지만, v-html은 HTML로 표현된다. 3. 데이터 종류 Vue에서 데이터 타입은 숫자형, 문자형, Boolean이 있다. 데이터 종류 {{ myPrice * 1.08 }} {{ "안녕하세요~" + myName + "님"}} {{ myName.substr(0,1) }} 배열 오브젝트 배열,오브젝트 {{ myArr..
