Vue.js 기초

프로그래밍/Vue.js

dev109 2017. 12. 26. 17:22

Vue-CLI로 프로젝트 기본 틀 만들기

vue init [템플릿명][프로젝트명]

이 명령어를 수행하면 [프로젝트명]으로 디렉터리가 생성됨

simple 템플릿을 이용하여 첫 번째 Vue.js 애플리케이션 생성

윈도우 cmd / Mac terminal 명령창에 명령어 실행

vue init simple hellovuejs

생성된 프로젝트

기존 index.html 소스코드 수정

<!DOCTYPE html>

<html>

<head>

  <meta charset="utf-8" /> <!-- 한글깨짐방지 -->

  <title>Welcome to Vue</title>

  <script src="https://unpkg.com/vue"></script>

</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>

콧수염 표현식(Mustache Expression)

결과 화면 ( 크롬에서 index.html 파일 열기)

크롬 개발자 도구의 콘솔(console)에서 직접 변수의 값에 접근하여 변경 가능

=> simple객체(뷰모델 객체)의 data 속성은 모델 객체를 참조하고 있기 때문에 데이터(모델) 변경시 뷰모델 객체는 즉시 HTML 요소에 반영 시킴

MVVM 패턴과 hellovuejs 예제