Vue 기초

Who made Vue.js

Evan You

• Angular 사용에서 무거운 개념들을 덜어내기 위해 만들었다.

Vue.js intro

what

1. Front-End Framework

   사용자와 대면해서 사용하는 소프트웨어

2. SPA(Single Page Application) 제작

   1 request 1 response 가 아니라 큰 문서 한장만 받은 다음에 비동기 요청을 통해서 필요한 부분만 갱신하도록!

3. Client-side rendering

   데이터를 만들고 사용자가 원하는 화면을 보여주기 위해 서버가 일(던진다, 만든다)을 다 했다. client는 받기만 했는데 서버는 던지고 브라우저가 만든다. => client에서 최종 rendering 을 담당

   브라우저가 일을 하려면 필요한 건? Javascript

4. MVVM 패턴 (Model View ViewModel)

   View	ViewModel	Model
   DOM	DOM Listeners => <= Directives(데이터 바인딩) Vue	Plan JavaScript Objects
   HTML	new Vue(object) View & Model 연결	{key: value}

5. Reactive(반응형의) / Declarative(선언형의)

   반응형은 모든 것을 다 정해주지 않고 선언만 해줘도 동작한다. “코드 간결”

why

Data의 변경에 따른 DOM 변화(조작)

1. 배우기 쉽다.
2. UX 향상
3. 프레임워크의 장점(DX 향상)
   1. No etc, 선택과 집중
   2. 유지/보수 용이
   3. 커뮤니티와 라이브러리

how :green_heart:

cdn

vue.js cdn 검색을 통해 https://kr.vuejs.org/v2/guide/installation.html에서 cdn 가져온다.

밑에 cdn은 body 끝 부분에 추가해주면 된다.

1

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

유용한 기능 추가 설치

• VSC extension 설치 : Vetur

• chrome extensions : Vue.js devtools 크롬에 추가

  • 설치 완료 후 상단에 V 회색 우클릭 > 확장 프로그램 관리 > 파일 URL에 대한 엑세스 허용을 켜주기

※ 주의 : vue script 작성시에 trailing comma 찍어주기! “오타 에러 주의”