Study/Vue9 [Vue] Vue CLI 란? (+설치 방법) Vue CLI란? 뷰로 빠르게 프로젝트를 구성하고 프로토 타이핑을 하고 싶을 때 사용하는 CLI 도구입니다. CLI란? Command Line Interface로 사용자는 커맨드 창을 통해 문자로 입력을 주는 것을 말합니다. Vue CLI 설치 1) 먼저 node.js를 설치해야 한다. 2) Node.js를 설치했다면 아래 명령어를 버전을 확인합니다. npm은 Node Package Manager로 node.js를 설치할 때 함께 설치됩니다. node -v // 10 버전 이상 npm -v // 6 버전 이상 3) 아래 명령어를 통해 vue cli를 설치합니다. npm install -g @vue/cli 4) Vue CLI 설치 명령어 [Vue CLI 2.x] 명령어 vue init '프로젝트 템플릿 유.. 2020. 12. 7. [Vue] watch 속성 computed와 watch 속성의 차이점 - vuejs.org/v2/guide/computed.html#ad Watch 특정 데이터의 변화를 감지하여 자동으로 특정 로직을 수행해주는 속성입니다. {{ num }} computed 속성을 이용한 클래스 코드 작성 방법 Hello www.inflearn.com/course/Age-of-Vuejs/ Vue.js 시작하기 - Age of Vue.js - 인프런 Vue.js로 쉽게 웹 개발할 수 있도록 기본 개념과 핵심 기능에 대해서 학습하고 구현해봅니다. 강좌를 들으시고 나면 Vue.js로 프런트엔드 개발을 하시는게 재밌어질거에요. 초급 웹 개발 프레임워 www.inflearn.com joshua1988.github.io/vue-camp/ Cracking Vu.. 2020. 12. 6. [Vue] 템플릿 문법 computed, v-if, v-show 템플릿 문법 Vue를 사용하여 화면을 조작하는 것으로 크게 1) 데이터 바인딩, 2) 디렉티브로 나뉩니다. 1) 데이터 바인딩 Vue Instance에서 정의한 속성들을 화면에 표시하는 방법입니다. 가장 기본적인 데이터 바인딩 방식은 콧수염 괄호(Mustache Tag)입니다. {{ message }} new Vue({ data: { message: 'Hello Vue.js' } }) 2) 디렉티브 Vue로 화면의 요소를 더 쉽게 조작하기 위한 문법입니다. 화면 조작에서 자주 사용되는 방식들을 모아 디렉티브 형태로 제공하고 있습니다. Hello Vue.js {{ item }} new Vue({ data: { show: false items: ['shirts', 'jeans', 'hats'] } }) 이외.. 2020. 12. 6. [Vue] HTTP 통신 라이브러리 - Axios 엑시오스 Axiso 란? Vue에서 권고하는 HTTP 통신 라이브러리이다. Promise(JS의 비동기적 패턴) 기반의 HTTP 통신 라이브러리로 상대적으로 다른 HTTP 통신 라이브러리들에 비해 API가 다양하다. 자바스크립트의 비동기 처리 패턴 callback promise promise + generator async & await get user {{users}} www.inflearn.com/course/Age-of-Vuejs/ Vue.js 시작하기 - Age of Vue.js - 인프런 Vue.js로 쉽게 웹 개발할 수 있도록 기본 개념과 핵심 기능에 대해서 학습하고 구현해봅니다. 강좌를 들으시고 나면 Vue.js로 프런트엔드 개발을 하시는게 재밌어질거에요. 초급 웹 개발 프레임워 www.inflear.. 2020. 12. 6. 이전 1 2 3 다음
