Vue 2 입문 예제

Vue 를 처음 배우던 2021년 12월에 날짜별로 만든 예제다. 빌드 도구 없이 HTML 한 장에 CDN 으로 Vue 2 를 불러 돌린다. 책 정리는 Vue 노트에, 그 뒤에 만든 앱은 Todo (Vue)에 있다. 결과가 console.log 로만 나오는 페이지는 개발자 도구 콘솔을 열고 눌러 본다.

• 12월 20일 — 인스턴스, 표현식: 머스태시 안에서 삼항 연산자는 되고 선언문은 안 된다. 뷰 템플릿: v-bind 로 id·class·style. 컴포넌트: 전역 등록과 지역 등록. 이벤트: 자식이 $emit 한 이벤트를 부모가 받는다.
• 12월 21일 — 디렉티브: v-if, v-for, v-show, v-on. 메서드 인자, watch.
• 12월 22일 — 기본: 스크립트 순서를 바꿨더니 라이브러리가 적용되지 않았던 파일. 애견용품샵: 책의 쇼핑몰 예제를 Bootstrap 3 로. 위 화면이 이것이다.
• 12월 27일 — props, 자식 → 부모 이벤트, 이벤트 버스: 형제 컴포넌트가 빈 Vue 인스턴스로 통신한다. 상품 카드.
• 12월 29일 — 이벤트 객체와 인자, v-model 과 watch.

원본은 npm/vue/dist/vue.js 처럼 버전 없이 CDN 을 불러서 지금은 Vue 3 가 내려와 깨진다. 여기서는 vue@2.7.16 으로 고정했다. 애견용품샵의 가격 필터에 {{product.price ss| formatPrice}} 라는 오타가 있어 템플릿 컴파일이 실패하고 화면이 비어 있었는데, ss 를 지웠다. 그 밖의 코드는 오타까지 그대로다.