Vue.js 입문

Vue에 대한 몇가지 속성을 빠르게 파악하기 위해 기록을 남겨둔다. 공식적인 문서를 위주로 참고해서 작성할 예정!

예제1

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

var app = new Vue({
  el: '#app', //DOM의 id를 여기서 입력해주고 
  data: { // DOM안의 템플릿에 key value 형태로 데이터를 뿌려줌
    message: '안녕하세요 Vue!'
  }
})

문자열을 단순히 뿌려줌.
자 이제 뿌려주는걸 넘어서 바인딩! 해주는걸 보자.

예제2

<div id="app-2">
  <span v-bind:title="message">
    내 위에 잠시 마우스를 올리면 동적으로 바인딩 된 title을 볼 수 있습니다!
  </span>
</div>