인라인 이벤트 처리 및 이벤트 핸들러 메서드
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>연락처 조회 서비스</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<style>
.layout1 {
margin: 30px;
}
</style>
<script src="https://unpkg.com/vue@2.5.16/dist/vue.js"></script>
</head>
<body>
<div id="example" class="container layout1">
<p>
<input type="text" v-model="amount" class="form-control" />
</p>
<p>
<!--
<button id="deposit" class="btn btn-primary" v-on:click="balance += parseInt(amount)">예금</button>
<button id="withdraw" class="btn btn-primary" v-on:click="balance -= parseInt(amount)">인출</button>
-->
<button id="deposit" class="btn btn-primary" v-on:click="deposit">예금</button>
<button id="withdraw" class="btn btn-primary" v-on:click="withdraw">인출</button>
</p>
<h3>계좌 잔고 : {{ balance }}</h3>
</div>
<script type="text/javascript">
var vm = new Vue({
el: '#example',
data: {
amount: 0,
balance: 0
},
methods: {
deposit: function(e) {
var amt = parseInt(this.amount);
if (amt <= 0) {
alert("0 보다는 큰 값을 예금해야 합니다.")
} else {
this.balance += amt;
}
},
withdraw: function(e) {
var amt = parseInt(this.amount);
if (amt <= 0) {
alert("0 보다는 큰 값을 인출할 수 있습니다.")
} else if (amt > this.balance) {
alert("잔고보다 많은 금액을 인출할 수 없습니다.")
} else {
this.balance -= amt;
}
}
}
});
</script>
</body>
</html>
기본 이벤트가 처리되지 않도록 하기
대표적인 기본 이벤트
- a 요소를 클릭했을 때 href 특성의 경로로 페이지를 이동시킴
- 브라우저에서 오른쪽 마우스를 클릭했을때 내장컨텍스트메뉴가 나타남
- form 요소의 submit 버튼 클릭시 action 특성에 지정된 경로로 이동
- input[type=text] 요소에 키보드를 누르면 입력한 문자가 텍스트 박스에 나타남
이벤트 수식어
<div id="example" v-on:contextmenu.prevent="ctxStop">
<a href="https://facebook.com" @click="confirmB">페이스북</a>
</div>
<script>
var vm = new Vue({
el : '#example',
methods : {
ctxStop : function(e) {
//e.preventDefault();
},
confirmB : function(e) {
if(!confirm("페이스북으로 이동할까요?")) {
e.preventDefault();
}
}
}
});
</script>
이벤트 전파와 버블링
- .stop : 이벤트 전파를 중단 시킴.
- .capture : 이벤트 포착(CAPTUREING_PHASE) 단계에서만 이벤트가 발생.
- .self : 이벤트 발생(RAISING_PHASE) 단계일 때만 이벤트가 발생.
<div id="example">
<div id="outer" @click.stop="outerClick">
<div id="inner" @click.stop="innerClick">
</div>
</div>
</div>
<script>
var vm = new Vue({
el : '#example',
methods : {
outerClick : function(e) {
console.log("##OUTER CLICK");
console.log("Event Phase : " , e.eventPhase);
console.log("Current Target: ", e.currentTarget);
console.log("Target: ", e.target);
//s.stopPropergation();
},
innerClick : function(e) {
console.log("##INNER CLICK");
console.log("Event Phase : " , e.eventPhase);
console.log("Current Target: ", e.currentTarget);
console.log("Target: ", e.target);
//s.stopPropergation();
}
}
});
</script>
이벤트 수식어
<button id="create" class="btn btn-primary" v-on:click.once="specialEvent">계좌 개설 1000원 이벤트</button>
....
<script type="text/javascript">
var vm = new Vue({
el: '#example',
data: {
amount: 0,
balance: 0
},
methods: {
specialEvent: function(e) {
this.balance += 1000;
},
....
}
});
</script>
키코드 수식어
<!--
키코드 13(enter) 일 경우에만 search 함수 호출
-->
<input type="text" v-model="name" @keyup.13="search"
placeholder="두글자 이상을 입력하세요"/>
| .enter |
.tab |
.delete |
.esc |
| .space |
.up |
.down |
.left |
| .right |
.ctrl |
.alt |
.shift |
| .meta |
|
|
|
- CTRL + C : @keyup.ctrl.67="copy" 로 지정 가능
마우스 버튼 수식어
<div id="example" v-on:contextmenu:prevent="ctxStop"
@mouseup.left="leftMouse" @mouseup.right="rightMouse">
....
</div>
