Vue.js 시작하기

Vue.js 란?

작은 화면단 라이브러리 역할부터 큰 규모의 웹 애플리케이션 개발을 돕는 프레임워크 역할까지 점진적으로 적용할 수 있는 프론트엔드 프레임워크이다.

명시적 렌더링(코어 라이브러리) → 컴포넌트 기반 → 클라이언트 사이드 라우팅(프레임워크 기능) → 상태관리

시작하기

<!-- development version 개발버전, 도움되는 콘솔 경고를 포함. -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<!-- production version 상용버전, 속도와 용량이 최적화됨. -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

문서에 vue 스크립트를 가져올 때 개발버전으로 가져와서 수정을 하며 배포할 때에는 상용버전으로 사용한다.
개발버전에서는 크롬 확장팩을 통해 데이터 수정이 가능하지만, 상용버전은 수정이 불가능하다.

Vue.js 공식 문서

선언적 렌더링

템플릿 구문을 사용하여 DOM에서 데이터를 선언적으로 렌더링 할 수 있다.

<body>
    <div id="app">
        {{ str }}
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        new Vue({
            el: '#app',  // element
            data: {
                str: 'hi'
            }
        });
    </script>
</body>

React와 다른점은 데이터와 DOM이 연결되어 업데이트 변경된 값에 따라 업데이트가 되는 것을 볼 수 있다.

엘리먼트 속성 바인딩

v-bind 속성은 디렉티브 라고 한다.
디렉티브는 Vue에서 제공하는 특수 속성임을 나타내는 접두어 v- 가 붙어있다.
렌더링된 DOM에 특수한 반응형 동작을 한다.

<div id="app-2">
  <span v-bind:title="message">
    내 위에 잠시 마우스를 올리면 동적으로 바인딩 된 title을 볼 수 있습니다!
  </span>
</div>

👉 "이 요소의 title 속성을 Vue 인스턴스의 message 속성으로 최신상태를 유지한다." 는 의미

var app2 = new Vue({
  el: '#app-2',
  data: {
    message: '이 페이지는 ' + new Date() + ' 에 로드 되었습니다'
  }
})

프레임워크 특징

1. 컴포넌트 기반 개발 방식

화면을 여러개의 작은 단위로 쪼개어 개발. (재사용성, 구현속도, 코드 가독성↑)

2. MVVM 패턴

화면 UI 코드와 백엔드 데이터 처리 코드를 분리

View = 웹페이지
DOM = 구성하기 위한 내용들
Model = 화면에 보여주기 위한 데이터를 담고있는 자바스크립트 객체

3. 리액트와 앵귤러의 장점을 흡수