인생 투자 노트 📒

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 개수가 늘어나..

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..

html 태그의 특정 속성 값(attribute)과 데이터를 연동하는 방법을 배워 봅니다. Attribute Binding - Intro to Vue.js | Vue Mastery In this lesson, we’ll explore ways you can connect data to the attributes of your HTML elements. www.vuemastery.com 예제를 완성하려면 style.css 파일과 이미지 파일이 필요한데 동영상 오른쪽에 Lesson Resources에서 가져올 수 있습니다. {{ product }} {{ description }} var app = new Vue({ el: '#app', data: { product: 'Socks', description: '..

아주 간단한 예제로 데이터가 어떻게 렌더링 되는지 알아보자. The Vue Instance - Intro to Vue.js | Vue Mastery This lesson covers how to get your data from your JavaScript to show up in your HTML. www.vuemastery.com 영상을 따라 하면 아래와 같다. {{ product }} var app = new Vue({ el: '#app', data: { product: 'Socks' } }) Vue 인스턴스 생성 시 data 옵션에 product 값을 넣어주고 html에서 {{}} 문자열 안에 동일한 이름으로 넣으면 자동으로 렌더링 된다. 영상 마지막에 있는 도전과제를 풀어본 답은 아래와 같다. ..

검색해서 다운로드한 후 유용한 플러그인들을 세팅하자. # Vetur 아래 영상을 참고로 ESLint, prettier 추가로 설치했다. 참고로 vetur 공식 홈페이지에서 가이드하는 것과 다르다. Optimizing your Editor - Real World Vue.js | Vue Mastery Learn how to configure your code editor for an optimized Vue development experience www.vuemastery.com 플러그인을 설치하면 snippet을 몇 가지 제공한다. 가장 많이 사용할 snippet은