실제 개발에서는 npm 으로 Vue를 다운받고 webpack으로 번들링해서 사용하지만, 지금 하고 있는 튜토리얼은 CDN을 받아서 vue를 사용합니다.
https://kr.vuejs.org/v2/guide/installation.html#CDN
설치방법 — Vue.js
Vue.js - 프로그레시브 자바스크립트 프레임워크
kr.vuejs.org
위 페이지에 접속해 CDN을 복사해서 script 태그에 추가해 줍니다. 그리고 Vue 는 div 루트 태그를 만들고 마운트해서 사용합니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
</head>
<body>
<div id="root"></div>
<script src="https://unpkg.com/vue"></script>
<script>
new Vue({
el: 'root'
})
</script>
</body>
</html>
Data binding을 위해 input 태그를 만들어줍니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
</head>
<body>
<div id="root">
<input type="text" id="todo" />
<button type="button" onclick="add()">추가</button>
</div>
<script src="https://unpkg.com/vue"></script>
<script>
new Vue({
el: 'root'
})
function add() {
let todo = document.getElementById('todo').value
console.log(todo)
}
</script>
</body>
</html>예전에는 input에 있는 값을 가져오기 위해 위와 같이 태그를 id로 접근해 값을 가져고오 add() 라는 함수를 버튼에 추가해줬습니다.
vue를 이용하면 아래와 같이 코드가 깔끔해집니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
</head>
<body>
<div id="root">
<input type="text" id="todo" v-model="todo" />
<button type="button" onclick="add()">추가</button>
<br />
할 일 : {{ todo }}
</div>
<script src="https://unpkg.com/vue"></script>
<script>
new Vue({
el: '#root',
data() {
return {
todo: ''
}
}
})
</script>
</body>
</html>기존에는 데이터를 화면에 그리려면 innerHTML과 같은 메소드를 사용했다면, 이제는 데이터가 어떻게 변경될 지 에만 중점을 두면 된다.
'Vue > Tutorial' 카테고리의 다른 글
| [Vue - tutorial] 배열 변경 감지 (0) | 2019.09.04 |
|---|---|
| [Vue - tutorial] event handling (0) | 2019.09.04 |
| [Vue - tutorial] attribute binding (0) | 2019.09.03 |
| [Vue - tutorial] 리스트 출력하기 (0) | 2019.09.03 |
| [Vue - tutorial] Vue devtools (0) | 2019.09.03 |
