Vue Mastery에 Intro 학습하고 나서 Todo App을 구현해 봤다. 프로젝트는 Vue CLI로 손쉽게 구성할 수 있었다. Vue CLI 설치한 후 vue ui 명령을 수행하면 프로젝트를 웹페이지에서 쉽게 설정할 수 있다. 👍 .prettierrc.js 파일을 설정하여 몇 가지 규칙을 추가했다. module.exports = { singleQuote: true, semi: false, } 프로젝트를 생성하면 기본적으로 만들어 주는 페이지 중에 Home은 그대로 두고 About 페이지를 Todo로 변경해서 진행했다. 구현한 기능은 다음과 같다. - 할일 추가, 삭제, 수정 - 완료된 할 일 목록, 남은 할 일 목록, 전체 할 일 목록 보여주기 - 완료한 할일 모두 삭제 Todo App {{ ed..
리뷰 입력과 리뷰 목록을 탭 메뉴로 분리하는 작업을 진행한다. Vue 인스턴스를 생성하여 전역 이벤트 객체를 만들고 서로 연동하는 방식이 흥미롭다. 하지만 프로그램이 규모가 커진다면 디버깅하기 무척 어려울 것으로 추정된다. 우선 따라 해 보기로 했다. Tabs - Intro to Vue.js | Vue Mastery In this lesson, we’ll learn how to add tabs to our application and implement a simple solution for global event communication. www.vuemastery.com reviews 데이터를 product-tabs 컴포넌트에 props로 전달한다. Cart({{ cart.length }}) const..
이번에는 v-model 키워드를 활용해서 form 요소에 양방향 바인딩(2 way binding)하는 방법을 배워 봅니다. 또한 사용자 입력값을 유효성 체크하는 로직도 추가합니다. Cart({{ cart.length }}) Reviews There are no reviews yet. {{ review.name }} Rating: {{ review.rating }} {{ review.review }} input, textarea, select, submit 요소를 가진 리뷰(product-review) 컴포넌트를 추가하고 v-model로 각 값을 바인딩시킵니다. 리액트의 경우 state를 컴포넌트 내부에 선언하고 setState 함수로 업데이트하는 방식인데 vue 경우 v-model로 연동하면 자동으로 바..
cart html를 상위 컴포넌트로 이동시킨 후 하위 컴포넌트(product)에서 add to cart 버튼이 클릭됐을 때 장바구니 상태를 업데이트하도록 변경한다. Cart({{ cart.length }}) emit를 사용하면 광범위하게 이벤트가 전파 되기때문에 선호하지 않는 방법을 사용하고 있다. 🤔 Vue.component("product", { props: { premium: { type: Boolean, required: true } }, template: ` {{ title }}On Sale! In Stock Out of Stock Shipping: {{ shipping }} {{ detail }} Add to cart `, data(){ return { brand: 'Vue Mastery', ..
vue의 인스턴스로 구현했던 코드를 Vue.component로 바꾸는 작업을 진행한다. Components - Intro to Vue.js | Vue Mastery In this lesson we’ll be learning components: reusable blocks of code that can have both structure and functionality and create a more modular and maintainable codebase. www.vuemastery.com Vue.component("product", { template: ` {{ title }}On Sale! In Stock Out of Stock {{ detail }} Add to cart Cart({{ cart..
computed 속성을 사용하는 예제입니다. Computed Properties - Intro to Vue.js | Vue Mastery In this lesson, we’ll be covering Computed Properties. These are properties on the Vue instance that calculate a value rather than store a value. www.vuemastery.com {{ title }}On Sale! In Stock Out of Stock {{ detail }} Add to cart Cart({{ cart }}) 기존 코드에서 불필요한 데이터를 제거했습니다. 그리고 예제와 다르게 ES6 문법인 템플릿 문법을 사용해서 title를 노출하도록 ..
Class & Style Binding - Intro to Vue.js | Vue Mastery In this lesson we’ll be learning how to dynamically style our HTML by binding data to an element’s style attribute, as well as its class. www.vuemastery.com v-bind: 축약인 : 에 class, style을 데이터 상태에 따라 노출하게 할 수 있다. 양말의 색상을 글자에서 색상으로 변경하는 기능과 재고가 없을 경우 Add to cart 버튼을 disabled 시키고 회색 버튼으로 노출하는 기능을 구현하면 다음과 같다. {{ product }}On Sale! {{ description ..
이벤트가 발생했을 때 수행되어야 하는 메서드와 연결하는 방법을 배웁니다. Event Handling - Intro to Vue.js | Vue Mastery In this lesson we’ll be learning how to listen for DOM events that we can use to trigger methods. www.vuemastery.com v-on:이벤트명 = "메소드명" 태그에 추가합니다. {{ product }}On Sale! {{ description }} In Stock Out of Stock {{ detail }} {{ variant.variantColor }} Add to cart Cart({{ cart }}) Add to cart 버튼이 눌리면 Cart 개수가 늘어나..