Vue 시작하기
vue 란 무엇인가
vue.js 란 user interface를 구축하기 위한 혁신적인 프레임워크 입니다.
다른 프론트엔드 라이브러리가 큰 규모로 매우 조직적이고 짜임새있는 프레임웍을 추구하는 반면 vue 는 기존의 프로젝트에 매우 쉽게 적용 가능한 유연성을 가진 프레임워크로 각광받고 있습니다.
vue 설치하기
cdn
vue는 다음과 같이 cdn을 통해 가볍게 시작할 수 있습니다.
1 | <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script> |
npm
1 | npm install vue |
How does vue works?
Vue instance 는 순수한 자바스크립트 객체이며 vue 에서의 데이터 바인딩은 vue instance 의 루트 프로퍼티로 할당된다.
즉, 인스턴스가 생성된 이후에 뷰에 프로퍼티를 추가하게되면 이는 트래킹 되지 않는다
그렇다면 어떻게 뷰는 데이터의 실시간 변경사항을 화면에 반영하는 것일까?
Vue instance 에 등록된 데이터가 변경되면 이는 내부적으로 작업큐에 들어가고 뷰의 다음 tick에 동작하게 된다. 여기서 틱이란 뷰가 데이터의 변화를 감지하고 화면을 다시 렌더링 하는 주기로 쉽게 말하면 일정 시간 간격으로 데이터의 변화를 체크하여 화면을 다시 렌더링 하는 것이다. 때문에 매우 적은 시간간격으로 데이터가 변경되면 즉, 한번의 틱 내에 같은 데이터가 여러번 변화된다면 vue는 최종으로 변화된 것만 큐에 저장하고 다시 rendering 하기 때문에 화면은 한번만 렌더링 되게 된다.
이 경우에는 뷰 인스턴스의 nexttick같은 함수를 사용하여 바로 다음 틱에 적용되도록 할 수있다
vue 의 compile
만약 vue-loader혹은 vueify를 사용한다면 *.vue 파일은 빌드 시점에 js 파일로 precompile 됩니다.
다음의 webpack 의 vue loader를 통해 pre compile을 하는 방법입니다.
vue 파일은 html 과 같은 문법을 사용하여 vue 컴포넌트를 작성하며 3가지 유형의 최상위 language block 인 ,