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은
리액트만 사용해본 개발자가 뷰(vue.js)를 빠르게 학습하기 위해 학습한 내용들을 남깁니다. 계획 Visual Studio Code 설치 한국 공식 문서 읽어보기 link Vue Mastery 예제 따라 하면서 학습하기 Intro to Vue.js link Mastering Vuex link Scaling Vue with Nuxt.js link Todo App 만들어보기 간단하게 만들어 보기 컴포넌트 분리 with vuex with Nuxt with API 단위 테스트 환경 구축 환경 구축