이벤트 처리

v-on 디렉티브를 사용

@ 단축표현이 가능함.

@click : 클릭 이벤트 등록

메서드를 호출하면

event 객체를 넘겨서 event.value 등으로 값을 받을 수 있음

<template>
	<div>
		<button @click="printEventInfo('hello vue3', $event)">
			inline event handler
		</button>

		<hr />

		<input type="text" @keyup="onKeyupHandler" />
	</div>
</template>

<script>
	export default {
		setup() {
			const printEventInfo = (message, event) => {
				console.log('message', message);
				console.log('event.target', event.target);
				console.log('event.target.tagName', event.target.tagName);
			};

			const onKeyupHandler = event => {
				console.log('event.key', event.key);
			};
			return { printEventInfo };
		},
	};
</script>

<style></style>

이런식으로 사용하면 이벤트를 연결할 수 있다.

이벤트 수식어 (Modifiers)

. 하면 붙는 수식어를 지정할 수 있다.

preventDefault : 기본 기능을 막음. stopPropagation : 이벤트 전달을 막음

.stop = e.stopPropagation()

<template>
	<div>
		<div id="modifiers">
			<div @click="clickDiv">
				DIV 영역
				<p @click="clickP"
					>P영역 <span @click="clickSpan">span영역</span></p
				>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		setup() {
			const clickDiv = () => {
				console.log('click Div');
				location.href = 'https://naver.com';
			};
			const clickP = () => {
				console.log('click P');
			};
			const clickSpan = e => {
				console.log('click Span');
				e.stopPropagation();
				alert('좋아요');
			};

			return {
				clickDiv,
				clickP,
				clickSpan,
			};
		},
	};
</script>

<style>
	#modifiers div,
	#modifiers p,
	#modifiers span {
		padding: 40px;
	}

	#modifiers div {
		background-color: #ccc;
	}
	#modifiers p {
		background-color: #999;
	}
	#modifiers span {
		background-color: #666;
		display: block;
	}
</style>

위와 같이 작성하면 span 태글르 클릭했을 때 이벤트 전파가 안되고 멈추게 된다.

@click.stop = “clickSpan” 이렇게 사용하여 막을 수도 있다는 것이다.

기본 기능 막는 것은 preventDefault

const clickA = event => {
	event.preventDefault();
	event.stopPropagation();
	alert('어떤기능~');
};

위와 같이 사용하면 기본 기능을 막아주는 것을 확인할 수 있다.

capture

이벤트 리스너를 캡처모드로 사용

self

자기 자신만 호출할 수 있다.

@click.self 하면

자기 클릭 안하고서는 호출 안됨.

once

한번만 실행한다.

버튼 클릭 했을 때.

@click.once 하면 딱 한번만 호출 됨.

passive

모바일 장치를 위해서 사용함. 스크롤 passive 참고로 알아둘 것.

키 수식어

enter

<template>
	<div>
		<input type="text" @keyup.enter="addTodo" />
		<ul>
			<li v-for="(todo, index) in todos" :key="index">{{ todo }}</li>
		</ul>
	</div>
</template>

<script>
	import { reactive } from 'vue';
	export default {
		setup() {
			const todos = reactive([]);

			const addTodo = event => {
				todos.push(event.target.value);
				event.target.value = '';
				event.target.focus();
			};
			return { todos, addTodo };
		},
	};
</script>

<style></style>

@keyup.enter 를 사용하면 enter일 때만 호출되는 함수를 사용할 수 있다.

만약에 @keyup.ctrl.enter 이렇게 사용하면 ctrl + enter 를 눌러야만 실행되게 만드는 것이다.