Recent Posts
Recent Comments
Link
«   2024/12   »
일 월 화 수 목 금 토
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31
Tags
more
Today
Total
관리 메뉴

고리타분한 개발자

[Vue JS] Lists 본문

Vue JS/Step By Step

[Vue JS] Lists

sunlee334 2017. 11. 30. 11:08

이번엔 기본적인 리스팅에 대해서 포스팅을 해보려고 합니다. 리스팅을 하기전에 데이터 바인딩을 먼저 간단하게 복습 해보고 진행하는 것이 좋을것 같네요. 아래 코드는 간단한 데이터 바인딩 입니다.


<!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