[VUE][JavaScript] Vue.js 엔터키 처리 및 setTimeout 사용 방법

안녕하세요. 소다맛사탕 입니다.

Spring boot + Vue.js 개인 프로젝트를 만들어 간단하게 Vue.js를 공부중 입니다.

 

간단하게 Vue.js에서 enter키와 setTimeout을 사용하는 방법을 적어봅니다.

 

vue.js 파일 기본 구조

<!-- vue.js 파일-->
<template>
	<!-- html LINE -->
</template>
<script>
	/* script LINE */
</script>
<style>
	/* style LINE */
</style>

 

vue.js 엔터키 처리

<input v-on:keyup.enter="fncEnter" />

<!-- 또는 -->

<iput @keyup.enter="fncEnter" />

위와 같은 템플릿 문법을 사용하면 엔터 클릭시 동작하게 됩니다.

fncEnter는 script 선언부에서 호출된 함수(function)입니다.

 

vue.js setTimeout 처리

<script>
export default {
	methods: {
		setTimeout(()=>{
			/* 실행될 코드 위치 */
		}, 1000);
	}
}
</script>

기본적인 javaScript setTimeout 방식과 똑같이 실행될 코드 부분을 감싸 실행하면 됩니다.

선언한 1000은 1초를 나타냅니다.

 

setTimeout 다른 방식 처리

<template>
	<input @keyup.enter="fncSetTimeOut" />
</template>

<script>
export default {
	methods: {
		fncTest01(){
        	/* 동작될 코드 */
		},
		fncSetTimeOut(){
			setTimeout(function() {
				console.log('동작 테스트', this)
				this.fncTest01()
			}.bind(this), 1000)
		}
	}
}
</script>

Vue 인스터스가 사용할 함수들을 분리 시켜서 동작 시킵니다.

 

methods 안에서 함수를 html에서 직접적으로 사용하고 싶을때는

두번째 방식이 더 깔끔해 보일 수 있을것 같습니다.