[Vue] Vue.js

Vue.js 프레임워크

- 자바스크립트 프레임워크 

- ECMAScript 5 기능을 사용하기 때문에 Internet Explorer 8(IE8)이전 버전을 지원하지 않는다. (2.x ver 기준)

- Angular Js나, React는 대규모 어플리케이션을 개발할때 사용되며, Vue.js는 가벼운 소규모 어플리케이션을 만드는것을 목표로 만들어 졌다.

 

프레임워크

- 복잡한내용을 간단히 미리 규격화/모듈화 해둔 도구

- 기존 자바 스크립트에서 사용할 수 없던 문법이나, 입력방식들을 사용할 수 있게 되고, 타 플러그인을 통해 UI컴포넌트 스타일, 추가 기능들을 불러쓴다는 것도 가능해진다.

 

SPA(Single Page Application)

- 한 페이지 내에서 모든 콘텐츠를 보여주는 웹사이트

 

Vue.js 장점

SPA 장점

1. 자연스럽게 변경되는 웹 페이지

2. 서버와 프론트엔드의 역할 분담이 알기 쉽다.

3. 네이티브 어플리케이션 대신 사용하는것도 가능하다. (20)

* 서버에서 데이터를 처리하지 않고, 자체적으로 데이터를 처리하여 HTML에 바로 적용이 된다.

 

Vue.js 주요 기능

기능	서식	기능	서식
요소의 속성을 데이터로 지정	v-bind	데이터를 사용한 계산	computed
입력폼과 데이터의 연결	v-model	데이터의 변화 감시	watch
이벤트 연결	v-on	표시/비표시에 애니메이션 처리	transition
조건에 따라 표시	v-if	컴포넌트 조립	component
데이터를 있는 그대로 표시	{{데이터}}	반복해서 표시	v-for

 

Vue.js 설치

- htpps://kr.vuejs.org/v2/guide/installation.html

 

CND 사용

- CND : Content Delivery Network, 네트워크에 공개된 라이브러리를 직접 읽어 들여 실행하는 방법. 

- 개발 시점에서 최신 버전을 선택하면 최신 환경을 사용할 수 있다. 버전을 지정해 두면 이후 버전업이 되어도 개발 시점에 사용했던 버전으로 동작하는 버전을 이어서 사용할 수 있다.

- 2.x.x ver : <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>

- 3.x.x ver :  <script src="https://unpkg.com/vue@3"></script>

 

※vue.js : 개발할때 사용 (용량이 큼) / vue.min.js : 배포할때 사용