Vue Lv1

https://www.inflearn.com/course/age-of-vuejs/크롬확장자 vue.js devtools, node lts, vscode https://github.com/joshua1988/learn-vue-jsvscode, exten

Vue 소개

컴포넌트는 화면의 영역을 구분하여 개발할 수 있는 뷰의 기능입니다.컴포넌트 기반으로 화면을 개발하게 되면 코드의 재사용성이 올라가고빠르게 화면을 제작할 수 있습니다.

뷰 컴포넌트는 각각 고유한 데이터 유효범위를 갖습니다.따라서, 컴포넌트 간에 데이터를 주고 받기 위해선 아래와 같은 규칙을 따라야 합니다.상위에서 하위로는 데이터를 내려줌, 프롭스 속성하위에서 상위로는 이벤트를 올려줌, 이벤트 발생Root의 데이터객체 message:

Vue Router

전반적인 비동기에 대한 사전 이해도가 필요. (callback, Promise, async/await)Axios 깃헙 주소자바스크립트 비동기 처리와 콜백 함수자바스크립트 Promise 이해하기자바스크립트 async와 await

뷰의 템플릿 문법이란 뷰로 화면을 조작하는 방법을 의미합니다.템플릿 문법은 크게 데이터바인딩과 디렉티브로 나뉩니다.데이터 바인딩 : 콧수염 괄호 {{ }} (Mustache Tag)디렉티브

데이터의 변화에 따라서 특정 로직을 실행increase 버튼을 누를때마다watch의 console.log('changed')가 실행된다대부분의 케이스에서 computed vs watch 는 computed가 적합하다.computed는 벨리데이션(확인), 간편한 텍스트

Vue CLI 공식 사이트 링크node ltsnpm터미널에 npm install -g @vue/cli 입력권한 문제 발생 시 sudo npm install -g @vue/cli로 입력 (관리자권한)새 창 터미널에 vue create 프로젝트 폴더 위치(이름)cd vue

터미널에서 신규 vue cli 프로젝트를 생성한다. vue create vue-formcd vue-formform에 기본적인 로그인 구조를 마크업 (id/password, button)App.vueinput에 v-model="인스턴스의 데이터 이름"을 추가해서 양방향으