Vue.js 입문 가이드: v-on 지시문 사용법
이벤트 처리
Vue의 이벤트 처리는 지시어 v-on을 사용하여 수행됩니다. 예를 들어 버튼을 클릭하면 어떤 일이 발생하도록 할 수 있습니다. 이벤트 처리는 특정 이벤트가 발생할 때 특정 코드를 실행하도록 HTML 요소를 설정하는 것입니다.
Vue의 이벤트는 사용하기 쉽고 페이지가 실제로 반응하도록 만듭니다. Vue 메소드는 이벤트가 발생할 때 실행되도록 설정할 수 있는 코드입니다. v-on 수정자를 사용하면 이벤트에 반응하는 방법을 더 자세히 설명할 수 있습니다.
이벤트 시작하기
숲 속에서 무스의 수를 세기 위해 버튼을 클릭하는 방법을 보여주는 예를 들어보겠습니다.
<!DOCTYPE html>
<html>
<head>
<title>Count Moose</title>
<style>
#app {
border: dashed black 1px;
width: 200px;
padding: 20px;
}
img {
width: 100%;
}
</style>
</head>
<body>
<h1>Example: Count Moose</h1>
<div id="app">
<img src="img_moose.jpg" width="770" height="549">
<p>{{ "Moose count: " + count }}</p>
<button v-on:click="count++">Count moose</button>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
const app = Vue.createApp({
data() {
return {
count: 0
}
}
})
app.mount('#app')
</script>
</body>
</html>
이벤트
코드 실행을 위한 트리거로 사용할 수 있는 이벤트는 많이 있는데, 가장 일반적인 이벤트로는 '클릭', '마우스오버', '마우스아웃', '키다운', '입력' 등이 있습니다. 사용할 이벤트의 전체 목록을 보려면 HTML DOM 이벤트 페이지를 방문하세요.
'v-on' 지시문
지시문 v-on을 사용하면 사용자가 수행하는 작업에 응답하는 페이지를 만들 수 있습니다. Vue는 v-on을 사용하여 브라우저에 어떤 이벤트를 수신할지, 해당 이벤트가 발생할 때 수행할 작업을 알려줍니다.
행동 양식
이벤트가 발생할 때 더 복잡한 코드를 실행하려면 Vue 메소드에 코드를 넣고 HTML 속성에서 이 메소드를 참조할 수 있습니다.
<p v-on:click="changeColor">Click me</p>
이벤트 수정자
Vue 메소드 외에도 이벤트 수정자라는 것을 사용하여 페이지가 로드된 후 한 번만 발생하도록 이벤트를 수정하거나 '제출'과 같은 이벤트를 수정하여 양식이 제출되지 않도록 할 수 있습니다.
클릭 이벤트 예제
아래 예제는 버튼을 클릭하여 전구의 상태를 전환하는 방법을 보여줍니다.
<div id="app">
<div id="lightDiv">
<div v-show="lightOn"></div>
<img src="img_lightBulb.svg">
</div>
<button v-on:click="lightOn = !lightOn">Switch light</button>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
const app = Vue.createApp({
data() {
return {
lightOn: false
}
}
})
app.mount('#app')
</script>
oninput 이벤트 예제
아래 예제는 입력 필드에 입력할 때마다 입력 이벤트 횟수를 증가시키는 방법을 보여줍니다.
<div id="app">
<input v-on:input="inpCount++">
<p>{{ 'Input events occured: ' + inpCount }}</p>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
const app = Vue.createApp({
data() {
return {
inpCount: 0
}
}
})
app.mount('#app')
</script>
mousemove 이벤트 예제
아래 예제는 마우스를 움직일 때마다 배경색이 변경되는 방법을 보여줍니다.
<div id="app">
<p>Move the mouse pointer over the box below</p>
<div v-on:mousemove="colorVal=Math.floor(Math.random()*360)"
v-bind:style="{backgroundColor:'hsl('+colorVal+',80%,80%)'}">
</div>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
const app = Vue.createApp({
data() {
return {
colorVal: 50
}
}
})
app.mount('#app')
</script>
v-for 루프에서 v-on 사용 예제
v-on 지시문을 v-for 루프 내에서도 사용할 수 있습니다. 배열의 항목은 값 내부의 각 반복에 사용할 수 있습니다.
<div id="app">
<ul>
<li v-for="(item, index) in items" v-on:click="handleClick(index)">
{{ item }}
</li>
</ul>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
const app = Vue.createApp({
data() {
return {
items: ['Item 1', 'Item 2', 'Item 3']
}
},
methods: {
handleClick(index) {
alert('Clicked on item ' + index);
}
}
})
app.mount('#app')
</script>
결론
Vue의 v-on 지시문은 이벤트 처리를 간편하게 구현할 수 있는 강력한 도구입니다. 이 글에서 소개한 예제를 통해 v-on 지시문의 기본 사용법을 익히고 다양한 상황에 적용할 수 있습니다. Vue.js를 사용하여 더욱 반응형 웹 애플리케이션을 개발해 보세요.
참고 자료
이 글이 유용했다면 좋아요와 공유 부탁드립니다! 더 많은 웹 개발 관련 정보는 저희 블로그에서 확인하세요.
