Vue.js란?

리액트를 공부하다 Vue.js가 심심치 않게 들린다...
궁금해서 어떤건지 한번 알아보려고 한다.

Vue.js는 간단하고 사용하기 쉬운 인기 있는 javascript 프레임워크이다.
리액트와 비슷하게 자주 사용된다고 하는데 프레임워크가 뭔지 아는 사람이고 javascript를 할 줄 알고 문서만 볼 줄 안다면 접근하기에 크게 어렵진 않을 것 같다!

Vue의 특징

• MVVM 패턴
  MVVM 패턴은 모델(Model), 뷰(View), 뷰모델(ViewModel)의 세 가지 구성 요소로 이루어진 패턴이다. Vue.js는 이 패턴을 사용하여 데이터와 뷰를 분리함으로써 유지보수성을 향상시킨다.

• 선언적 렌더링
  선언적 렌더링은 뷰를 HTML 템플릿으로 정의하고, Vue.js가 템플릿을 기반으로 DOM을 동적으로 렌더링하는 방식이다.

• 데이터 바인딩
  데이터 바인딩은 뷰의 데이터를 모델의 데이터와 연결하는 기능이다. 데이터 바인딩을 사용하면 뷰의 데이터를 변경하면 모델의 데이터가 자동으로 업데이트된다.

Vue는 어떤 프로젝트에 적합한가?

• 단순한 UI를 구현해야 하는 프로젝트
  뷰는 컴포넌트의 구조가 트리 구조로 되어 있어 단순한 UI를 구현하기 쉽다.

• 유지보수가 중요한 프로젝트
  뷰는 단방향 데이터 바인딩을 지원하여 유지보수가 쉬운 경우가 많다.

• 동적인 콘텐프를 많이 사용하는 프로젝트
  뷰는 양방향 데이터 바인딩을 지원하여 동적인 콘텐프를 쉽게 처리할 수 있다.

example

1. Vue.js 설치

npm install vue

2. Vue.js 프로젝트 생성 (hello-vue 프로젝트)

npx vue init hello-vue

프로젝트가 생성되면 다음과 같은 파일이 생성된다.

hello-vue/
├── README.md
├── package.json
├── src/
│   ├── App.vue
│   └── main.js
└── .gitignore

3. App.vue 파일을 다음과 같이 수정한다.
   이 파일에서는 "Hello, Vue.js!"라는 메시지를 표시하는 컴포넌트를 정의한다.

<template>
  <div>
    <h1>Hello, Vue.js!</h1>
  </div>
</template>

<script>
export default {
  name: 'App',
};
</script>

4. main.js 파일을 다음과 같이 수정한다.
   이 파일에서는 App컴포넌트를 렌더링한다.

import Vue from 'vue';
import App from './App.vue';

new Vue({
  el: '#app',
  components: {
    App,
  },
});

5. 서비스 실행

npm run dev