Recent Posts
Recent Comments
Link
«   2024/05   »
일 월 화 수 목 금 토
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] Vue Event Listeners 본문

Vue JS/Step By Step

[Vue JS] Vue Event Listeners

sunlee334 2017. 12. 4. 15:05

안녕하세요. 지난시간에는 addEventListener 를 사용하여 버튼에 이벤트를 주었는데요, 이번 포스트에서는 v-on directive event listeners를 사용 해보려고 합니다. v-on은 vue에서 기본으로 제공하는 directive입니다. 사용법은 v-on:option 이런식으로 v-on뒤에 :option을 붙여주면 됩니다. 저희는 버튼을 클릭해서 리스트를 추가하는 이벤트를 만들려고 하니, v-on:click이런식으로 사용하면 되겠죠?

코드를 통해 확인 하겠습니다.


<!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" v-model="newName">
<button v-on:click="addName">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: {
newName: '',
names: ['Park', 'Lee', 'Kim', 'Jung']
},

methods: {

addName() {
this.names.push(this.newName);
}
},
// mounted() {
// document.querySelector('#button').addEventListener('click', () => {
// let name = document.querySelector('#input');
// app.names.push(name.value);
// name.value = '';
// })
// }
})
</script>
</body>

</html>

 

일단 전체 코드는 이러합니다.

division 으로 감싸져 있는 부분부터 지난번 코드와 비교해 보면, 


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


이랬던 코드 input 부분에 newName이라는 model을 추가시켜 주었습니다. 그리고 버튼 클릭 부분은 더이상 id 값으로 연결 되지않고 v-on directive로 이벤트를 주었습니다. 

이번엔 Vue 코드 부분을 살펴볼까요?

이전에는 addEventListner를 사용하여 click 이벤트를 mounted 시켰지만 v-on:click에 addName이라는 함수를 연결하여 push 이벤트를 줌으로써 코드를 더욱 간결하게 만들수 있게 되었습니다.

이번에도 역시 Vue Devtools로 확인해보면



이번에는 data: {} 부분에 추가하였던 newName이라는 empty string이 잘 표시되는걸 확인 할 수 있습니다.


하지만, 여기서 우리는 문제점을 확인 할 수 있습니다. 눈치가 빠르시거나, 코드를 이미 실행시켜 보신분들은 알 수 있을탠데요.




'Jang' 이라는 이름을 적고 'Add Name'을 클릭하였는데 'Jang'이 없어지지 않고 계속 남아있는 문제가 발생하게 되었습니다. 이 문제는 코드 한줄이면 해결할 수 있는데요


methods: {

addName() {
this.names.push(this.newName);

this.newName = '';
}
},


바로 이렇게 newName을 다시 empty string으로 만들어 주면 됩니다.


확인해보면 이전과 달리 newName에 'Jang'이 남지않고 empty string으로 변화 한것을 확인할 수 있습니다.


P.S. 'v-on:'은 @로 변경할 수 있습니다. 예를들어 v-on:click을 @click으로 변경 시킬수 있습니다.



저작자표시

'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] Lists  (0) 2017.11.30
[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