기록, 정리 조각

메인 Vue는 App.vue로 가져야 함

가장 최상위 컴포넌트

Visual Studioi extension 추천 vetur

.vue 파일 인식

Props

js에서는 camelCase

html template에서는 kebab-case

동적 데이터 바인딩은 v-bind, :단축어

props (parent -> child)

부모에서 자식으로 데이터 전송

custom-events

$emit custom events ( child -> parent)

이벤트 이름은 kebab-case 사용 권장

자식에서 부모로 이벤트 전달

provide-inject

provide - inject

많은 컴포넌트를 지나서 데이터를 전송할 때

장거리 통신이 필요한 경우에만 쓰는 게 좋다

prop, emit을 대체해서는 쓰지 말자

• 컴포넌트

See the Pen vue_06 by DoYoubLee (@bluesid) on CodePen.

See the Pen vue_05 by DoYoubLee (@bluesid) on CodePen.

• 조건부 렌더링
v-if
v-else
v-else-if
v-else, v-else-if는 v-if 또는 v-else-if 다음에 와야 한다.
key를 통하여 재사용 가능한 element를 제어
v-show, element는 항상 렌더링 되고 DOM에 남아 있음

• 리스트 렌더링
v-for, 두번째 인자에 대해 현재 항목에 대한 index를 제공
v-for 객체, 두번째 인자에 대해 name제공
v-for 객체, index도 제공
v-for, key, 반복되는 DOM 내용이 단순한 경우나 의도적인 성능 향상을 위해 기본 동작에 의존하지 않는 경우를 제외하면
가능하면 언제나 v-for에 key를 추가하는 것이 좋음

See the Pen vue_04 by DoYoubLee (@bluesid) on CodePen.

• v-bind를 통한 class true/false
• 기본이 true인 class는 v-bind를 묶지 않아도 된다.

<div class="demo" :class="{active: boxBSelected}]" @click="boxSelected('B')"></div>

• computed를 통해 계산된 class 반환

See the Pen vue_03 by DoYoubLee (@bluesid) on CodePen.