vue.js와 같은 웹 개발 프레임워크는 프론트엔드의 기초 지식인 html, css, javascript에 관한 지식을 전제로 한다. 만일, 이러한 기초 지식이 부족하다면, 이것들을 먼저 공부하는 것을 추천한다. 프론트엔드 개발에서 기초 지식없이 프레임워크를 시작하는 것은 좋은 생각이 아니다.

자바스크립트 등의 웹 코딩 예제를 테스트해 볼 수 있는 도구로 요즘은 ‘코드 플레이그라운드’ 툴 들을 많이 사용한다. 대표적으로 CodePen과 JSFiddle을 가장 많이 사용한다.

필자는 CodePen을 사용하여 예제들을 테스트 해 볼 것이다. 이 툴을 이용하여 vue.js가 어떻게 동작하는지 매우 간단한 예제로 테스트 해보자. 먼저, html 페이지에 단순히 아래와 같은 링크를 포함해 보자.

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

이제 vue.js를 사용할 준비가 되었다. 이번에는 안녕하세요 vue.js! 라는 문구를 웹페이지에 띄워보자.

먼저, html 페이지에 아래 내용을 작성하고,

<div id="app">
  {{ message  }}
</div>

아래와 같은 자바스크립트를 추가한다. 아래 자바스크립트에서 바로 Vue 객체를 생성하고, 내용을 넣고, 위에서 정의한 <div>의 id와 연결을 하는 것이다.

var app = new Vue({
  el: '#app',
  data: {
    message: '안녕하세요 vue.js!'
  }
})

결과값:

안녕하세요 vue.js!

아래 링크를 따라가면 완성된 예제를 볼 수 있다. message의 내용을 바꾸어 가며 테스트 해보자.

예제1 보기 : 예제1

이렇게 첫 시간, 첫번째 vue.js를 만들어 보았다. 다음 시간에는 vue.js의 directive(지시자)에 대하여 알아보자.