Vue.js 특징

🔸Vue.js 특징

SPA

• 하나의 페이지로 동작하는 웹 어플리케이션

Single Page Aplication으로 한 페이지 내에서 모든 컨텐츠를 보여주는 방식이다. 이 방식을 쓰면 사용자 편의성이 증가한다. 빠르게 화면이 전환되는 느낌을 받기 때문에 쇼핑몰 등의 사이트에서 구매율이 증가하는 경향이 있다.

• 기존 방식

기존 방식은 웹 페이지에서 사용자가 이벤트를 발생시키면 이를 서버에 전달하고, 서버에서 처리한 로직 결과를 웹에 전달하면 새롭게 랜더링 되는 방식이다.

• SPA

SPA는 웹에서 이벤트가 발생하면 이를 Vue로 전달하고, 데이터를 Vue에서 처리한 뒤 다시 랜더링 하는 방식이다. 이 방식은 서버가 정말 필요한 데이터 처리에만 집중할 수 있는 장점이 있다. 또한 프론트에서 사용자 환경이 매끄러워진다.

SPA 장점

1. 자연스러운 웹 페이지 변경
2. 서버와 프론트엔드 역할 분담 명확
3. 네이티브 어플리케이션으로 대체 가능

Simple

입문자도 쉽게 웹 페이지에 인터랙티브한 기능을 추가하는 것이 가능하며 배우고 쉽고, 가벼운 어플리케이션 제작에 용이함

MVVM

Vue는 Model-View-ViewModel 방식으로 만들어져 있다. 이는 Model(Vue 안의 데이터)과 View(HTML 요소) 사이에서 ViewModel(View와 Model을 어떻게 연결할까)로 나누어 생각하는 방식이다.

MVVM구조를 이해하기 위해서는 3단계 흐름을 파악하는 것이 좋다.

1. 데이터는 무엇인가? (Model)
2. 표시되는 요소는 무엇인가? (View)
3. 어떻게 연결되는가? (ViewModel)

MVC패턴

1. Model : Data와 관련된 로직 담당
2. View: 사용자에게 화면을 보여주는 역할
3. Control: View와 Model 사이에서 발생하는 이벤트 처리

Vue 작성 순서

1. 데이터 만들기
2. 표시할 요소 준비
3. 연결하기

주요 기능 리스트

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

참고서적) Vue.js 입문 - Yoshinao Mori 저, 신대호 옮김