[Vue] Vue.js 시작하기

Vue.js 시작하기

 

Thumbnail

 

Vue.js는 싱글 페이지 어플리케이션을 개발을 위한 프레임워크

 

 

Vue.js는 가볍고 빠르며 낮은 학습 곡선을 가지고 있다는데, 예를들어 Angular는 TypeScript를 선행해야한다고 한다.

 

 

- 최신버전 Vue CDN

 

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>

 

 

Vue.js의 간단한 템플릿 구문을 사용해서 DOM에서 데이터를 선언적으로 렌더링이 가능함.

 

 

1. 단방향 데이터 바인딩

 

<div id="simple">
  {{ msg }}
</div>

var msg = {           // Model : 출력에 사용할 데이터
    msg : '안녕하세요 Vue!'
}

var model = new Vue({		// Vue-Model : 출력위치와 데이터를 매칭
  el: '#simple',
  data: msg
});

/*-----------------------------------------------------------------------*/

var model = new Vue({	
  el: '#simple',
  data: {
    msg: '안녕하세요 Vue!'
  }
})

 

Result

 

안녕하세요 Vue!

 

 

 

 

2. 양방향 데이터 바인딩

 

See the Pen LYZxmxg by junheeleeme (@junheeleeme) on CodePen.

 

 

<input type="text" v-model="message" />
// v-model="message"

 

하단 인풋박스에 데이터를 입력하여 양방향 데이터 바인딩이 되는 것을 볼 수 있다.

 

 

시작하기 — Vue.js