굉장히 오랜만에 포스팅을 진행해봅니다. 온가족이 코로나에 걸리는 바람에 정말 끙끙 앓고 후유증 때문에 몇주를 고생하다가 정상 컨디션으로 돌아오고 다시 공부를 시작하려고 합니다.
보통 사용자 화면에서 클릭을 한다거나 키보드를 입력할 때 이벤트를 발생시키는 경우가 많습니다. input태그에 문자를 작성한다던지 엔터를 친다던지 버튼을 클릭한다 던지 등등
여러가지 케이스들이 많은데 오늘은 이 이벤트들이 작동할 수 있도록 해보겠습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
new Vue({
el: '#app',
methods: {
logText: function() {
console.log('clicked')
}
}
})
</script>
</body>
</html>우선 늘 하던대로 기본 html과 vue인스턴스를 생성해줍니다.
이번엔 내부에 methods : {} 라는걸 생성했고 그 내부에 logText를 만들었습니다.
이제 body 태그 내부에 있는 div#app 내부에 button을 하나 간단하게 생성해보도록 하겠습니다.
<button v-on:click="logText">click me</button>보시면 일반 버튼인데 v-on:clikc="logText"라는 속성이 포함되어 있습니다.
이 부분은 v-on이라는 디렉티브를 이용해서 이벤트를 작동시키기 위함인데요.
보시다시피 클릭 했을 때 logText를 실행하도록 되어있습니다.
vue 인스턴스를 생성할때 methods 내부에 logText라고 설정해두었죠 ?
정상적으로 작동하게 된다면 여러분들의 콘솔창에 clicked라고 표시되어야 합니다. 어서 확인해보세요.
네 저는 정상적으로 들어왔습니다. 이런식으로 v-on을 이용해서 클릭이벤트를 사용할 수 있습니다.
또 다른 방식으로도 사용할 수 있습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<button v-on:click="logText">click me</button>
<input type="text" v-on:keyup.enter="logText">
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
new Vue({
el: '#app',
methods: {
logText: function() {
console.log('clicked')
}
}
})
</script>
</body>
</html>button태그 바로 아래 input text를 하나 만들어주고 그 속성으로 v-on:keyup.enter="logText"라고 주었습니다.
해당 속성은 현재 포커스가 input에 있는 상태에서 사용자 키보드에서 enter를 입력 받으면 logText 함수를 호출하도록 되어있습니다.
여러분들도 서버를 재시작 해보시고 테스트 해보세요.
버튼도 눌러보고 input에 문자를 입력하고 엔터키를 눌러봤을 때 정상적으로 logText함수가 실행되면서 로그가 보여지네요.
아무래도 사용자가 로그인이나 검색처럼 무엇인가를 입력하고 바로 엔터를 첬을 때 프로세스가 실행되게 끔하는 방식으로 많이 사용되지 않을까 생각해봅니다 ㅎㅎ
여기까지 v-on에 관련된 내용을 정리해봤습니다. v-on은 위 내용만 있는게 아니라 분명히 다른 내용들도 있기 때문에 공부할 때마다 틈틈히 업데이트 하도록 하겠습니다 ㅎㅎ
감사합니다~
'Dev > Vue' 카테고리의 다른 글
| Vue - computed로 클래스 조작 (0) | 2022.05.31 |
|---|---|
| Vue - watch (0) | 2022.05.31 |
| Vue - 엑시오스(axios) (0) | 2022.04.25 |
| Vue - 라우터 링크[router-link] (0) | 2022.04.13 |