[Vue.js] Vue.js Event
Event
w3school 의 Events 항목을 보면 웹 브라우저에서 발생할 수 있는 다양한 이벤트들을 javascript 언어로 어떻게 처리할 수 있는지 확인할 수 있다.
v-on 속성을 이용하면 이벤트에 대한 처리가 가능하다. v-on:이벤트명='호출할 함수 명' 또는 @이벤트명='호출할 함수 명' 과 같은 형태로 이벤트 발생 시 동작할 함수를 등록할 수 있다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://unpkg.com/vue"></script>
<style type="text/css">
.in {
background-color : red;
color : yellow;
}
.out {
background-color : yellow;
color : red;
}
</style>
<script>
window.onload = function(){
var vm1 = new Vue({
el : '#test1',
data : {
imgSrc : './image/logo.png',
imgWidth : '100',
data1 : 0,
data2 : 0,
addResult : 0,
InOutCss : 'out'
},
methods : {
btnEvent : function(){
alert('Button Click Event')
},
imgEvent : function(){
alert('Image Click Event')
},
addNumber : function(){
this.addResult = this.data1 + this.data2
},
inEvent : function(){
this.InOutCss = 'in'
},
outEvent : function(){
this.InOutCss = 'out'
}
}
})
}
</script>
</head>
<body>
<div id='test1'>
<button type='button' v-on:click='btnEvent'>버튼</button>
<button type='button' @click='btnEvent'>버튼</button>
<br/>
<img v-bind:src='imgSrc' v-bind:width='imgWidth' @click='imgEvent'/>
<br/>
data1 : <input type='number' v-model.number='data1'><br/>
data2 : <input type='number' v-model.number='data2'><br/>
<button type='button' @click='addNumber'>숫자 더하기</button>
<h3>결과 : </h3>
<h3 v-bind:class='InOutCss' @mouseenter='inEvent' @mouseleave='outEvent'>마우스 Hover 구현</h3>
</div>
</body>
</html>
Event 수식어
Vue.js 공식 한국어 홈페이지에서 이벤트 핸드링 문서를 보면 다양한 수식어를 확인할 수 있다. 수식어 종류가 굉장히 많아 기억하기 힘들기 때문에 Reference 홈페이지를 즐겨찾기로 저장하는 것을 추천!
예를들어 .stop 수식어는 이벤트가 발생한 후 해당 태그를 감싸는 상위 태그의 이벤트로 트리거가 전파되는 것을 막아준다. 또한 웹 브라우저에서 지정한 동작을 무시하고 싶을 때는 .prevent 를 사용하면 된다.
Leave a comment