[JavaScript] Vue.js 소개 💬

📌 Vue.js란

https://vuejs.org/

Vue.js - The Progressive JavaScript Framework | Vue.js

 

- UI를 빠르게 개발하기 위해서 만들어진 자바스크립트 프레임워크.

- MVVM(Model-View-ViewModel) 패턴을 따르며, 어플리케이션 로직과 UI 분리를 위해 설계되었다.

- Angular.js나 React.js보다 많이 알려지진 않았지만 최근 급속도로 확산되고 있으며 실제 Google Trends의 검색어 비율과 GitHub에서 vue.js의 관심이 크게 올라간 것을 확인할 수 있다.

 

📌 장점

- 다른 프레임워크와는 달리 유연하고 가볍다.

- angular.js와는 달리 전체 아키텍처를 새롭게 구성할 필요가 없고 기존의 웹 어플리케이션의 일부 UI만 적용하는것도 가능하다.

- SPA(Single Page Application:단일 페이지 어플리케이션) 구성을 위해 필요한 라우터기능도 지원한다.

- react.js와 마찬가지로 가상 DOM을 지원하여 빠른 UI 렌더링이 가능하다.

 

📌 간단한 예시

공식 문서에 나온 간단한 예시 코드이다.

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

<div id="app">
  {{ message }}
</div>

 

📌 핵심 기능

• 선언적 렌더링 : Vue는 JavaScript 상태를 기반으로 HTML 출력을 선언적으로 설명할 수 있는 템플릿 구문으로 표준 HTML을 확장한다.
• 반응성 : Vue는 JavaScript 상태 변경을 자동으로 추적하고 변경이 발생할 때 DOM을 효율적으로 업데이트한다.