[백견불여일타/Vue.js] 5장 - 이벤트 처리

45661 단어 vue.js 프론트엔드 vue.js

💪 핵심 키워드

이벤트

v-on

🌠 개요

지난 장에서는 v-model를 활용해서 페이지에서 데이터를 가져오는 법에 대해 공부했습니다. 이번 시간에는 vue에서 v-on을 활용하여 이벤트 처리하는 법에 대해 공부합니다.

[01] 이벤트와 연결 : v-on

v-on 디렉티브는 Vue 메소드를 실행시키는 이벤트 핸들러입니다.
여기서 이벤트란 사용자로부터의 키 입력, 클릭 등의 조작을 의미합니다.
사용자의 조작을 감지하여 특정 메소드를 실행시켜주는 것이 v-on인 것입니다.

서식

<태그명 v-on:"이벤트"="메소드명"></태그명>

HTML 코드에 위와 같이 작성하시고,
메소드의 내용은 Vue 인스턴스의 data 옵션에 정의하면 됩니다.

서식

new Vue({
	el :"#id명",
    data : {...},
    methods : {
    	"메소드명" : function(){
        },
        "메소드명" : function(){
        }
    }
})

💌 생략 가능하다

예~전 포스팅에서 공부했던 v-bind처럼 v-on도 생략 가능합니다. 그만큼 자주 사용하니까 생략 버전도 개발했겠죠?

<a v-on:click="doSomething"></a>

은

<a @click="doSomething"></a>

위와 같이 생략해서 사용할 수 있습니다.

버튼 클릭 이벤트

클릭하면 두번째는 누를 수 없게 되는 버튼 예제

소스코드

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Vue.js sample</title>
		<link rel="stylesheet" href="style.css" >
		<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<h2 lign="center">클릭하면 두번째는 누를 수 없게 되는 버튼 예제</h2>
			<button v-on:click="stop">눌러보세요</button>
		</div>
		<script>
			new Vue({
				el:"#app",
				data:{
				},
				methods : {
					stop:function(){
						alert("더이상 버튼을 누를 수 없습니다!");
					}
				}
			})	
		</script>
	</body>
</html>
<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}
.menu{
  background: darkslateblue;
  padding : 15px;
   border-radius: 5px;
}
.menu a{
  color: white;
  padding: 20px;
}
</style>

결과

화질구지이지만 애써 모른척하고 지나가겠습니다. 스겜스겜

파라미터를 전달하여 메소드 실행하기

클릭하면 지정된 값만큼 증가시키는 예제

소스코드

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Vue.js sample</title>
		<link rel="stylesheet" href="style.css" >
		<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<h2 lign="center">클릭하면 지정된 값만큼 증가 시키는 버튼 예제</h2>
			<button v-on:click="add(5)">5 증가</button>
			<button v-on:click="add(10)">10 증가</button>
			<button v-on:click="add(100)">100 증가</button>
			<p>{{num}}</p>
		</div>
		<script>
			new Vue({
				el:"#app",
				data:{
					num:0
				},
				methods : {
					add: function(n){
						this.num += n;
					}
				}
			})	
		</script>
	</body>
</html>
<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}
.menu{
  background: darkslateblue;
  padding : 15px;
   border-radius: 5px;
}
.menu a{
  color: white;
  padding: 20px;
}
</style>

결과

키 입력

특정 키가 입력될 때 이벤트가 실행되도록 할 수 있습니다.

서식

<input v-on:keyup.키수식자="메소드명"></a>

저 키서식자는 아래와 같이 키워드입니다.
암기하거나 필요하실 때 구글링 하셔서 활용하시면 될 것 같습니다.

[키 수식자]

enter

.tab

.delete

.esc

.space

.up

.down

.left

.right

.48~.57(0~9)

.65~.90(A~Z)

.ctrl

.alt

.shift

.meta(windows : 윈도우 키/ macOS : command 키)

enter 키를 누르면 알림창을 표시하는 예제

소스코드

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Vue.js sample</title>
		<link rel="stylesheet" href="style.css" >
		<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<h2 align="center">Enter키를 누르면 알림창을 표시하는 예제</h2>
			<input v-model="myData" v-on:keyup.enter="printAlert">
		</div>
		<script>
			new Vue({
				el:"#app",
				data:{
					myData:'',
				},
				methods : {
					printAlert:function(){
						alert("Enter키를 누르셨습니다!");
					}
				}
			})	
		</script>
	</body>
</html>
<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}
.menu{
  background: darkslateblue;
  padding : 15px;
   border-radius: 5px;
}
.menu a{
  color: white;
  padding: 20px;
}
</style>

결과

실습 : 간단한 계산기 구현

소스코드

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Vue.js sample</title>
		<link rel="stylesheet" href="style.css" >
		<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<h2 align="center">간단한 계산기</h2>
			<input v-model.number="num1">
			<input v-model.number="num2"><br>
			<button v-on:click="add(num1, num2)">덧셈계산</button>
			<button v-on:click="minus(num1, num2)">뺄셈계산</button>
			<button v-on:click="multiply(num1, num2)">곱센계산</button>
			<button v-on:click="divide(num1, num2)">나눗셈계산</button>
			<p>결과는 {{result}} 입니다.</p>
		</div>
		<script>
			new Vue({
				el:"#app",
				data:{
					num1:0,
					num2:0,
					result:0
				},
				methods : {
					add:function(a, b){
						this.result = a+b;
					},
					minus:function(a, b){
						this.result = a-b;
					},
					multiply:function(a, b){
						this.result = a*b;
					},
					divide:function(a, b){
						this.result = a/b;
					}
				}
			})	
		</script>
	</body>
</html>
<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}
.menu{
  background: darkslateblue;
  padding : 15px;
   border-radius: 5px;
}
.menu a{
  color: white;
  padding: 20px;
}
</style>

결과

💤 후기

이런저런 일로 한 주가 지나서야 vue 포스팅을 올립니다.
예..뭐.. 아직 멘탈이 약간 나가있는 상태인데 어찌저찌 다시 평균 텐션으로 올라오려고 하는 듯 합니다. 예..뭐.. 안올라오면 어쩔 수 없죠

벌써 3월 마지막 주 입니다. 2022년 1분기가 지나갔는데 다들 행복하고 유의미한 시기를 보내셨었기를 바랍니다.

예 뭐 사실 살면서 뭐 하나 집중하다 보면 문득 현타가 오기도 하고 우울해지고 두려워지기까지 하는 것 같습니다. 항상 여유를 가지고 숲을 볼 줄 알아야한다는 걸 머리로는 아는데 어렵네요.

어쩌다 제 포스팅을 훑어본 모든 분들 항상 건강 유의(코로나 조심, 환절기 감기 조심)하시고 유의미하면서도 틈틈히 행복도 하셨으면 좋겠습니다.

이렇게 쓰니까 어디 멀리 떠나서 쓰는 먹먹한 은퇴 자필문처럼 보이네..
그런거 아닙니다. 내일도 모레도 포스팅 할 겁니다. velog 고인물이 될거라구요 전🤍

Author And Source

이 문제에 관하여([백견불여일타/Vue.js] 5장 - 이벤트 처리), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@se_bb/백견불여일타Vue.js-5장-이벤트-처리

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

[Baekjoon] 2588 곱셈

React / 카카오 지도 API - 주소 검색

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다