[vue.js] 컴포넌트 분리와 eventBus
리뷰 입력과 리뷰 목록을 탭 메뉴로 분리하는 작업을 진행한다. 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..
[vue.js] Form 요소에 v-model 로 양방향 바인딩 적용하기
이번에는 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로 연동하면 자동으로 바..
[vue.js] 부모 - 자식 컴포넌트 데이터 전달과 이벤트 전파
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.js] 컴포넌트로 바꾸기
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..
[vue.js] computed 속성 사용하기
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를 노출하도록 ..
[vue.js] class, style 바인딩
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 ..
[vue.js] v-on: , @로 이벤트 바인딩
이벤트가 발생했을 때 수행되어야 하는 메서드와 연결하는 방법을 배웁니다. 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 개수가 늘어나..
[vue.js] v-if, v-else-if, v-else 그리고 v-show
Conditional Rendering - Intro to Vue.js | Vue Mastery In this lesson we’ll be uncovering how to conditionally display elements with Vue. www.vuemastery.com html 태그에 v-if, v-else, v-else-if 지시어로 데이터 상태에 따라 노출 여부를 결정할 수 있다. 아래 예제에서 inventory 값을 조건에 맞게 바꾸면 각 조건에 맞는 메시지가 노출된다. {{ product }}On Sale! {{ description }} In Stock Almost sold out! Out of Stock var app = new Vue({ el: '#app', data: { produ..