728x90
Vue event
Vue event
- Dom Event를 청취하기 위해 v-on directive를 사용
- method를 이용한 event handling
- inline event handling
v-on
- v-on directive를 사용하여 DOM이벤트를 듣고 트리거가 될 때 JavaScript를 실행할 수 있다.
<body>
<div id="app">
<button v-on:click="counter += 1">클릭</button>
<p>위 버튼을 클릭한 횟수는 {{counter}} 번 입니다.</p>
</div>
<script>
new Vue({
el: '#app',
data: {
counter: 0,
},
});
</script>
</body>
method event handler
- 이벤트 발생 시 처리로직을 v-on에 넣기 힘들기 때문에 이벤트 발생 시 처리해야 하는 method의 이름을 받아 처리
<body>
<div id="app">
<button v-on:click="greet">Greet</button>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
name: '댕쓰',
},
methods: {
greet: function (event) { //내부적으로 event 받음
alert('Hello ' + this.name + '!');
console.dir(event.target);
event.target.innerText = "눌러졌다.";
},
},
});
// 또한 JavaScript를 이용해서 메소드를 호출할 수 있습니다.
//vm.greet(); // => 'Hello Vue.js!'
</script>
</body>
inline method handler
- 메소드이름을 직접 바인딩 하는 대신 인라인 JavaScript구문에 메소드를 사용할 수도 있다.
- 원본 DOM 이벤트에 액세스 해야 하는 경우 특별한 $event 변수를 사용해 메소드에 전달할 수 있다.
<body>
<div id="app">
<form action="http://www.naver.com">
<button v-on:click="greet1('여러분')">Greet</button> <!--alert창 이후 바로 네이버로 넘어감-->
<button v-on:click="greet2($event, '조댕댕')">Greet</button> <!--alert창 이후 그대로-->
</form>
</div>
<script>
new Vue({
el: '#app',
methods: {
greet1: function (msg) {
alert('Hello ' + msg + '!');
console.dir(event.target);
},
greet2: function (e, msg) {
console.log(e)
if (e) e.preventDefault(); //다음 action 막아준다
alert('Hello ' + msg + '!');
console.dir(e.target);
},
},
});
</script>
</body>
Event Modifier (이벤트 수식어)
- 위 예제의 event.preventDefalut()와 같이 method내에서 작업을 할 수도 있지만 method는 DOM의 이벤트를 처리하는 것 보다 data처리를 위한 로직만 작업하는것이 좋다
- 이 문제를 해결하기 위해 Vue는 v-on이벤트에 이벤트 수식어를 제공한다
<body>
<div id="app">
<h2>페이지 이동</h2>
<a href="test29.html" @click="sendMsg1">페이지 이동 막기1</a><br /> <!--이동함-->
<a href="test29.html" @click="sendMsg2">페이지 이동 막기2</a><br /> <!--이동안함-->
<a href="test29.html" @click.prevent="sendMsg1">페이지 이동 막기3</a><br /> <!--이동안함-->
</div>
<script>
new Vue({
el: '#app',
methods: {
sendMsg1() {
alert('이동할까요?');
},
sendMsg2(e) {
e.preventDefault();
alert('이동막기');
},
},
});
</script>
</body>
728x90
'WEB > Vue.js' 카테고리의 다른 글
| [Vue] Axios (0) | 2022.05.11 |
|---|---|
| [Vue] Vue Component (0) | 2022.05.10 |
| [Vue] Vue Instance (0) | 2022.05.10 |
| [Vue] Vue Directive (0) | 2022.05.04 |
| [Vue] Vue.js란 (0) | 2022.05.03 |
댓글