고리타분한 개발자
[Vue JS] Lists 본문
이번엔 기본적인 리스팅에 대해서 포스팅을 해보려고 합니다. 리스팅을 하기전에 데이터 바인딩을 먼저 간단하게 복습 해보고 진행하는 것이 좋을것 같네요. 아래 코드는 간단한 데이터 바인딩 입니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="root1">
{{foo}}, {{name}}
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.9/vue.js"></script>
<script>
new Vue({
el: '#root',
data: {
foo: 'bar',
name: 'monkey'
}
})
</script>
</body>
</html>
결과: {{foo}}, {{name}}
자, 그럼 이번에는 array를 바인딩 해볼까요?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="root2">
{{names}}
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.9/vue.js"></script>
<script>
new Vue({
el: '#root1',
data: {
names: ['Park', 'Lee', 'Kim', 'Jung']
}
})
</script>
</body>
</html>
결과: {{names}}
array 바인딩이 정상적으로 작동하였으니 리스팅을 할 차례입니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="root3">
<ul>
<li v-for="name in names" v-text="name"></li>
</ul>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.9/vue.js"></script>
<script>
new Vue({
el: '#root3',
data: {
names: ['Park', 'Lee', 'Kim', 'Jung']
}
})
</script>
</body>
</html>
코드를 설명하자면, v-for 옵션을 사용하여 names를 받아오고 names에 있는 name들을 v-text에 바인딩 시켜 리스트 해주었습니다.
리스팅만 하면 재미가 없으니 input 태그를 이용하여 value를 추가시켜 보도록 하겠습니다. 우선 querySelector와 addEventListener를 사용한 예입니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="root4">
<ul>
<li v-for="name in names" v-text="name"></li>
</ul>
<input id="input" type="text">
<button id="button">Add Name</button>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.9/vue.js"></script>
<script>
var app = new Vue({
el: '#root4',
data: {
names: ['Park', 'Lee', 'Kim', 'Jung']
}
})
document.querySelector('#button').addEventListener('click', () => {
let name = document.querySelector('#input');
app.names.push(name.value);
name.value = '';
})
</script>
</body>
</html>
>
저희는 Vue를 공부중이니 Vue의 mounted 옵션을 이용하여 코드를 좀더 깔끔하게 만들어 보겠습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="root5">
<ul>
<li v-for="name in names" v-text="name"></li>
</ul>
<input id="input" type="text">
<button id="button">Add Name</button>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.9/vue.js"></script>
<script>
var app = new Vue({
el: '#root5',
data: {
names: ['Park', 'Lee', 'Kim', 'Jung']
},
mounted() {
document.querySelector('#button').addEventListener('click', () => {
let name = document.querySelector('#input');
app.names.push(name.value);
name.value = '';
})
}
})
</script>
</body>
</html>
코드가 제대로 동작하는지 지난시간에 포스팅했던 Vue Dev tools로도 한번 확인 해주면서 이번 포스트를 마치겠습니다.
'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] Vue Devtools (0) | 2017.11.30 |
| [Vue JS] Basic Data Binding (0) | 2017.11.30 |
'Vue JS/Step By Step' Related Articles
more
Comments