installation
하나의 페이지를 생성하고 코딩할 것이기 때문에 간단한 메모장, sublime text 같은 편집기를 사용해도 좋고, codepen 같은 온라인 playground 툴을 사용해도 좋지만 여기서는 IDE 툴인 WebStorm 툴을 바로 이용하겠다.
C폴더 아래에 프로젝트 폴더를 하나 만들고 (여기서는 ldk라고 하겠다) 그 아래에 cdn 폴더를 생성하고 cdn 폴더를 webstorm에서 연다.
프로젝트 창에서 해당 폴더를 선택후 우클릭하여 File > New > html 을 선택후 index를 입력하여 index.html을 새로 생성한다.
뷰 사이트에 개발버전 CDN Link를 (상용에 배포시에는 상용버전 CDN Link) 복사해서 새로운 페이지를 만든다.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> {{product}} </div> <!-- development version, includes helpful console warnings --> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script src="app.js"></script> </body> </html> |
|
1 2 3 4 5 6 |
var app = new Vue({ el: '#app', data: { product: 'Socks' } }); |
data binding – expression
뷰 인스턴스 생성시에 option으로 들어가는 필드를 살펴보자.
el은 뷰 인스턴스가 바인딩할 Dom 노드를 가르킨다.
data는 뷰 인스턴스가 관리할 모델 데이터이다. 리액트의 virtual DOM 개념으로 이 데이터가 뷰에 바인딩된다. 뷰에서 {{ }} 라는 expression 표현을 사용하면 모델 데이터와 연동된다.
javascript DOM API or jquery 처럼 직접 View를 조작하는 것이 아니라 View와 바인딩 된 모델 데이터를 수정하면 뷰는 자동으로 렌더링이 일어난다.
콘솔창에서 테스트해보자
app.product = “Shirts”;
크롬에서 Vue devtools chrom 으로 검색후 뷰 devtools를 설치하여 다운로드하고 devtools에서 마찬가지로 product 를 수정하여 테스트해보자.
Reactivity
리액트는 왜 리액트라 부르고 뷰는 왜 뷰라고 부르고, 앵규러는 왜 앵규러라고 부르는지 생각해본적이 있는가? SPA 프레임웍이라는 공통점을 갖고 있지만 가장 이름이 명확한것은 리액트라는 이름이다. 리액트는 VirtualDOM이라는 돔과 연결되는 가상 모델을 정의하고 이 모델 데이터를 변경하면 이 모델 데이터에 반응하여, 즉 리액트하여 뷰가 바뀐다는 개념이다.
뷰 인스턴스 내부에 data라는 속성이 모델 데이터에 해당하고 이 모델 데이터를 변경하면 그 즉시 뷰가 리액트하여 화면이 갱신된다는 의미이다.
+ Todo
Vue 인스턴스의 data 속성에 description 이라는 이름의 key를 추가하고 ”
A pair of warm, fuzzy socks” 라는 value를 할당한다. h1 태그 아래에 p 태그를 추가한뒤 expression 문법을 이용하여 화면에 display 해보자.
See the Pen Challenge 1 – Intro to Vue by Vue Mastery (@VueMastery) on CodePen.0