Vue.js study 1

VueJS는 최근에 등장한 js framework이다.
(Angular, React가 지배하고 있던 js framework 시장에서 점유율을 꾸준히 높이고 있다.)

VueJS 의 핵심은 간단한 템플릿 구문을 사용해 선언적으로 DOM에 데이터를 렌더링하는 것. 즉, 화면에 렌더링되는 HTML코드들을 컨트롤하는 것.

VueJS 는 CDN or npm 으로 사용환경을 만들 수 있다.
아래는 CDN을 사용한 것.

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<div id="app">
  <p>{{ title }}</p>
</div>

new Vue({
	el: "#app",
  data: {
  title: "Hello, VueJS!!"
  }
});

new Vue({ }) - Vue를 선언하고 정의해주는 역할.
el요소는 vue가 새롭게 정의될 때, 해당 vue가 적용될 요소를 지정해주는 역할. 즉, #app을 선택하여 지정하였다.

Vue는 여러 속성 property 들을 가지고 있는데 그중 data 는 Vue에서 사용할 정보들을 저장하는 곳. Object 형태.
title이란 변수를 만들어 값을 입력, title이 필요한 곳이 어딘지 찾는다.
data안에 저장된 값이 출력되는 곳이 {{ mustache }} 이다.
data.title의 값으로 지정된 값 "Hello, VueJS!!"가 p태그 안에 출력된 것을 볼 수 있다.

출처 - 맨땅에 VueJS