Vue.js 입문

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

예제1

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

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

예제2

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