본문 바로가기 메뉴 바로가기

인생 투자 노트 📒

프로필사진

전체 글 (128)
[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..

개발 노트 2020. 3. 12. 17:10
[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로 연동하면 자동으로 바..

개발 노트 2020. 3. 12. 11:52
[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', ..

개발 노트 2020. 3. 12. 10:26
[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..

개발 노트 2020. 3. 12. 09:40
[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를 노출하도록 ..

개발 노트 2020. 3. 11. 16:36
[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 ..

개발 노트 2020. 3. 11. 16:05
[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 개수가 늘어나..

개발 노트 2020. 3. 11. 15:50
[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..

개발 노트 2020. 3. 11. 14:37
이전 1 ··· 12 13 14 15 16 다음
이전 다음

Blog is powered by Tistory / Designed by Tistory

티스토리툴바

단축키

내 블로그

내 블로그 - 관리자 홈 전환
Q
Q
새 글 쓰기
W
W

블로그 게시글

글 수정 (권한 있는 경우)
E
E
댓글 영역으로 이동
C
C

모든 영역

이 페이지의 URL 복사
S
S
맨 위로 이동
T
T
티스토리 홈 이동
H
H
단축키 안내
Shift + /
⇧ + /

* 단축키는 한글/영문 대소문자로 이용 가능하며, 티스토리 기본 도메인에서만 동작합니다.