Vue.js 프레임워크
- 자바스크립트 프레임워크
- ECMAScript 5 기능을 사용하기 때문에 Internet Explorer 8(IE8)이전 버전을 지원하지 않는다. (2.x ver 기준)
- Angular Js나, React는 대규모 어플리케이션을 개발할때 사용되며, Vue.js는 가벼운 소규모 어플리케이션을 만드는것을 목표로 만들어 졌다.
프레임워크
- 복잡한내용을 간단히 미리 규격화/모듈화 해둔 도구
- 기존 자바 스크립트에서 사용할 수 없던 문법이나, 입력방식들을 사용할 수 있게 되고, 타 플러그인을 통해 UI컴포넌트 스타일, 추가 기능들을 불러쓴다는 것도 가능해진다.
SPA(Single Page Application)
- 한 페이지 내에서 모든 콘텐츠를 보여주는 웹사이트
Vue.js 장점
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 : 배포할때 사용
'Vue > 정리' 카테고리의 다른 글
[Vue] 이벤트 연결 (0) | 2022.12.22 |
---|---|
[Vue] 사용자 입력 연결 (0) | 2022.12.22 |
[Vue] 속성 지정 (0) | 2022.12.21 |
[Vue] 데이터의 종류 (0) | 2022.12.21 |
[Vue] 인스턴스 (0) | 2022.12.21 |
댓글