1. VUE JS 시작 환경구성 + 참고 페이지 링크

뷰에 대한 자세한 내용이 나와있는 페이지 : https://joshua1988.github.io/vue-camp/

 

vue를 공부할때에는 Visual Studio Code를 사용하여 실습한다.

 

다운받아야 할 프로그램 목록

-Chrome : https://www.google.com/intl/ko/chrome/

-Visual Studio Code : https://code.visualstudio.com/

-Node.js : https://nodejs.org/ko/

-Vue.js Devtools : https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd

 

다운로드시 버전 선택을 할 수 있게 나온다면 한단계 아래버전을 선택하여주는게 좋다.

(최신버전은 오류가 있을수 있다)

 

플러그인을 설치하기 위한 검색바

vscode 설치 플러그인 :

- Vetur (코드의 하이라이팅 기능, 코드가 알록달록 해진다)
- Night Owl (VS Code의 전체적인 테마 변경 가능)
- Material Icon Theme (VS Code의 아이콘 테마 변경 가능)
- Live Server (코드를 저장하기만 해도 화면이 알아서 로딩된다.)
- ESLint (틀린 코드를 알려주는 기능)
- Prettier (코드를 정렬해주는 기능이있다)
- Auto Close Tag (태그를 자동으로 닫아준다)

 

만약 한글패치가 되어있지 않다면 아래 이미지처럼 검색하여 install 해주면된다.

vs code가 한글 패치가 안되어있을 경우에 적용하기

 

#VUE는 무엇인가?
MVVM패턴의 뷰모델 레이어에 해당하는 화면(View)단 라이브러리

 

#view : 화면단에 비춰지는 화면 (DOM)

#DOM Listeners : 사용자가 무언가를 실행했을때에 이벤트를 잡아주어 자바스크립트에 있는 데이터를 바꾸어주거나 특정 로직에서 실행하여줌
(Model : Plain JavaScript Object 이곳에서 데이터를 바꾸어준다.)

 

#Data Bindings : 자바스크립트의 데이터가 변했을때에 data bindings를 해주는데 Model의 무언가가 바뀌었을때에
내용을 Data Bindings 이용하여 화면단에 바로 반영하여준다.

 

#html : 화면에 나타나는 어떤 태그, DOM의 정보를 넣는것.

#script : 해당 태그나 DOM의 내용을 조작하는것. 

 

html파일 기본 구조를 만드는 단축키 ! + Tab

! + Tab 입력전

입력후

# 라이브 서버 사용시 화면 오픈방법

라이브 서버를 사용한다면 vs code의 내용을 수정하고 저장한다면 자동 새로고침이 되어

편하게 개발할 수 있다.