Vue 이벤트 - day3

Vue 이벤트

Vue에서 이벤트를 다루는 방법에 대하여 알아보겠습니다.

Vue에서는 이벤트를 인라인 이벤트 처리방법과 이벤트 메서드 헨들링 방법이 존재합니다.

1. 인라인 이벤트

Vue의 이벤트의 경우에는 v-on디렉티브를 통해 이벤트를 처리할 수 있습니다. 가장 많이 사용되는 Click이벤트를 구현하여 보겠습니다.

<template>
  <div>
    <button v-on:click="good +=1">굳</button>
    <button @click="good +=1">굳</button>
  </div>
</template>

클릭 이벤트의 경우 버튼을 클릭시 변수good의 값이 +1 되는 이벤트를 작성한 코드입니다.

위와 같이 인라인 이벤트의 경우 클릭이벤트에서 원하는 코드를 입력하여 직접 실행하도록 합니다.

하지만 인라인 이벤트의 경우 한계점이 존재합니다. 

어떠한 한계점이 존재할까요? 그렇습니다. 이벤트의 코드가 변경되거나 로직이 복잡해졌을 경우입니다. 

 

위에 문제점을 해결 하기 위해  우리는 vue에서는 메서드를 통해 이벤트를 처리 할 수 있습니다.

2. 이벤트 핸들링 메서드

앞에서  구현한 코드를 메서드를 통해 작성해 보겠습니다.

<template>
  <div>
    <button v-on:click="good()">굳</button>
    <button @click="good()">굳</button>
  </div>
</template>

<script>

export default {
  name: 'App',
  data () {
    return {
      good: 0
    }
  },
  methods: {
    good() {
      if(good =< 10) this.good++
      else this.good--
    },
  },
}
</script>

버튼을 클릭시 good 메서드를 호출하게됩니다. good 메서드는 변수 good의 값을 컨트롤 하고 있습니다.

위와 같이 인라인 이벤트와 비교하여 복잡한 코드를 추가후 v-on디렉티브를 통해 메서드를 호출 할 수 있습니다.

 

3. 이벤트

vue에는 click 이벤트 외 여러가지 이벤트들이 존재합니다.

click	마우스를 클릭했을 때 실행함
dblclick	마우스를 더블 클릭했을 때 실행함
mouseover	마우스의 포인트가 요소 위로 올라왔을 때 실행함
mouseout	마우스의 포인트가 요소 밖으로 벗어났을 때 실행함
mousemove	마우스의 포인트가 이동했을 때 실행함
mousedown	마우스의 버튼을 눌렀을 때 실행함
mouseup	마우스의 버튼을 놓았을 때 실행함
keydown	키보드의 키를 눌렀을 때 실행함
keyup	키보드의 키를 놓았을 때 실행함
keypress	키보드의 키를 눌렀다가 놓았을 때 실행함
change	요소가 변경될 때 실행함
submit	<Form>이 제출될 때 실행함
reset	<Form>이 재설정될 때 실행함
select	<select>의 값이 선택되었을 때 실행함
focus	태그에 포커스가 있을 때 실행함
blur	태그에 포커스를 잃었을 때 실행함

4. 이벤트 수식어

vue에는 click 이벤트 외 여러가지 이벤트들이 존재합니다.

 

.prevent	기본 이벤트의 자동 실행을 중단
.once	한번만 이벤트를 실행
.stop	이벤트가 전파되는 것을 중단 시킴 (Bubbling 중단)
.capture	포착 단계에서만 이벤트를 발생
.self	발생 단계에서만 이벤트를 발생

5. 키보드 이벤트 

altKey	ALT 키가 눌러 졌는지 여부를 나타냅니다 (true/fale)
shiftKey	SHIFT 키가 눌러 졌는지 여부를 나타냅니다 (true/fale)
ctrlKey	CTRL 키가 눌러 졌는지 여부를 나타냅니다 (true/fale)
metaKey	META 키가 눌러 졌는지 여부를 나타냅니다. 윈도우에서는 window key 맥은 CommandKey
Key	이벤트에 의해서 나타나는 키의 값을 리턴함. 대소문자 구분

6. 마우스이벤트

button	이벤트를 발생시킨 마우스 버튼   0: 마우스 왼쪽 1: 마우스 휠 2: 마우스 오른쪽 버튼
ClientX, ClientY	마우스 이벤트가 일어 났을 때의 뷰포트 영역상의 좌표
offsetX, offsetY	마우스 이벤트가 발생한 HTML 요소 영역상에서의 좌표
pageX, pageY	마우스 이벤트가 일어났을 때의 HTML(document)영역상의 좌표
screenX, screenY	마우스 이벤트가 일어났을 때의 모니터 화면 영역상의 좌표