반응형
Vue-CLI로 프로젝트 기본 틀 만들기
vue init [템플릿명][프로젝트명]
이 명령어를 수행하면 [프로젝트명]으로 디렉터리가 생성됨
simple 템플릿을 이용하여 첫 번째 Vue.js 애플리케이션 생성
윈도우 cmd / Mac terminal 명령창에 명령어 실행
vue init simple hellovuejs
생성된 프로젝트
기존 index.html 소스코드 수정
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <!-- 한글깨짐방지 --> <title>Welcome to Vue</title> </head> <body> <div id="simple"> <h2>{{message}}</h2> </div> <script type="text/javascript"> //모델(Model) 객체 => 데이터를 가지고 있음 var model = { message : '첫번째 Vue.js Sample' }; //simple객체 : Vue 객체이자 뷰모델(ViewModel) 객체 var simple = new Vue({ el : '#simple', //HTML요소(Element) data : model // => 모델 객체를 참조함 }) // => HTML 요소와 데이터를 참조하고 있음 </script> </body> </html> | cs |
콧수염 표현식(Mustache Expression)
- {{ }} 와 같은 콧수염을 닮은 모양의 템플릿 표현식을 사용해 선언적으로 HTML DOM에 데이터를 렌더링함
- 뷰모델 객체의 데이터 속성에서 해당 값을 이 위치에 나타냄
- 문자열을 덧붙인다는 의미로 보간법(Interpolation)이라고도 함
결과 화면 ( 크롬에서 index.html 파일 열기)
크롬 개발자 도구의 콘솔(console)에서 직접 변수의 값에 접근하여 변경 가능
=> simple객체(뷰모델 객체)의 data 속성은 모델 객체를 참조하고 있기 때문에 데이터(모델) 변경시 뷰모델 객체는 즉시 HTML 요소에 반영 시킴
MVVM 패턴과 hellovuejs 예제
- MVVM 패턴은 Model - View - ViewModel의 줄임말
- MVVM 패턴은 애플리케이션 로직과 UI의 분리를 위해 설계된 패턴
- View는 HTML과 CSS로 작성되며, ViewModel은 View의 실제 논리 및 데이터 흐름을 담당
- View는 ViewModel만 알고 있으면 될 뿐, 그외의 요소는 신경쓰지 않아도 됨
반응형
'프로그래밍 > Vue.js' 카테고리의 다른 글
| [Vue.js] 간단한 todo app 구현 (0) | 2018.02.22 |
|---|
댓글