고리타분한 개발자
[Vue JS] Basic Data Binding 본문
개요
안녕하세요!!! 항상 angularJS를 사용해오다가 directive의 심한 학습곡선과 개발된지 오래된 framework인 만큼 버전 업그레이드도 더디고 있긴있나...? 아무쪼록 무언가 새로운 것을 공부 해보려는 찰나에 Angular, React, Vue 중에서 VueJS가 그나마 쉽고 공식 홈페이지도 이쁘게 잘 되어있어서 google의 지원을 받는 angular와 facebook의 react를 과감히 포기하고 선택하게 되었습니다. ㅎㅎ. 아무튼, vue api를 쭉 한번 보고 vuex와 nuxt를 진행하기전에 데이터 바인딩부터 시작해서 리스팅, 이벤트 리스너, 필터등을 복습해보고자 합니다. 간략하고 빠르게.
JS vs Vue JS
여러분들은 자바스크립트에서 querySelector를 가지고 data binding을 해본적이 있으신가요. 코드는 아래와 같습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input type="text" id="input">
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.9/vue.js"></script>
<script>
let data = {
message: 'Hello World!'
}
document.querySelector('#input').value = data.message;
</script>
</body>
</html>
당연히 결과값는 아래처럼 나오겠죠?
자, 그럼 이제 vue를 사용하여 데이터 바인딩을 해볼 차례입니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="root">
<input type="text" id="input" v-model="message">
<p>The value of the input is : {{message}}.</p>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.9/vue.js"></script>
<script>
new Vue({
el: '#root',
data: {
message: 'Hello World!'
}
})
</script>
</body>
</html>
코드를 보면 Vue 안의 el 부분과 div의 id값을 이어주고, v-model 옵션을 이용하여 message를 바인딩 해준것을 확인해 볼 수 있습니다.
결과값은 다음과 같습니다. 입력창 안에 원하는 값을 입력하여 바인딩이 잘 되어있는지 확인해보세요.
The value of the input is : {{message}}.
'Vue JS > Step By Step' 카테고리의 다른 글
| [Vue JS] The Need for Computed Properties (0) | 2017.12.04 |
|---|---|
| [Vue JS] Attribute and Class Binding (0) | 2017.12.04 |
| [Vue JS] Vue Event Listeners (0) | 2017.12.04 |
| [Vue JS] Lists (0) | 2017.11.30 |
| [Vue JS] Vue Devtools (0) | 2017.11.30 |
'Vue JS/Step By Step' Related Articles
more
Comments