티스토리 뷰
저번 글에서 Vue.js라는 친구가 컴포넌트 중심 개발 스타일을 가지고..... 빠르다.... 뭐 그정도로 알아봤다. 이어서 개념적인걸 알아보기 전에 백문이 불여일견이라고, Hello world부터 직접 해보자.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Hello, Vue</title> <script src="https://unpkg.com/vue@2.0.3/dist/vue.js"></script> </head> <body> <div id="app"> {{message}} </div> </body> <script> var app = new Vue({ el: "#app", data: { message: "Hello, world" } }); </script> </html> | cs |
일단 위의 HTML 파일을 그대로 만들고 실행해보자.
Vue.js같은 자바스크립트 프레임워크를 처음 접하는 등의 사람은 "{{message}} 이건 뭐지? 주석인가?" 등의 의문을 가지게 될 것이다. 처음에는 나도 그랬다. "PHP처럼 서버 사이드 언어도 아니고 저런 식으로 표현한다고 되나?"와 같은 의문을 가졌었다. 하지만 그래도 그냥 실행해보자.
실행해보면 의문이 놀라움으로 바뀐다. 와... PHP처럼 저런게 가능하구나...
이런 것을 전 글에서 본 vue.js의 "선언형 렌더링" 기능이라고 한다. data에서 message라는 것을 선언하고, 이를 DOM에 렌더링한다. 이를 vue.js의 공식 문서에서는 아래와 같이 표현하고 있다.
Vue.js는 간단한 템플릿 구문을 사용하여 DOM에 선언적으로 데이터를 렌더링할 수 있도록 해준다. At the core of Vue.js is a system that enables us to declaratively render data to the DOM using straightforward template syntax |
마치 PHP의 <? echo $message ?> 같다. 하지만 더 매력있다. 저 message라는 값을 바꿔주면, 표시되는 내용도 바로 바뀐다.
1 2 3 4 5 6 7 8 9 | <!-- Add this button --> <button type="button" onclick="changeMessage()">changeMessage()</button> <script> // Add this function function changeMessage() { app.message = "Nice to meet you!"; } </script> | cs |
위의 코드를 앞서 작성한 Hello World 예제에 추가해보자.
분명히 버튼을 누르면 message라는 데이터 값만 바꾸는 코드만 실행하는데 View가 즉각적으로 업데이트 되었다.
다시 말해, 단순히 저 코드만으로, DOM과 data는 연결된다. 이것이 이 글에서 Hello, world 예제를 만들어보면서 알게된 Vue.js 의 첫번째 매력 포인트다. 다음 글에서, 계속 다뤄보면서 또 다른 매력을 찾아보도록 하자.
'개발 이야기 > Web Frontend' 카테고리의 다른 글
| [Vue.js] Vue.js 개요 (0) | 2016.11.01 |
|---|