[Hoon] Vuejs 강의 - 이벤트 핸들링

이벤트 핸들링

https://kr.vuejs.org/v2/guide/events.html

이벤트 청취

v-on 디렉티브를 사용하여 DOM 이벤트를 듣고 트리거 될 때 JavaScript를 실행할 수 있습니다.

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="app">
  <button v-on:click="counter += 1">Add 1</button>
  <p>클릭한 횟수는 {{ counter }} 번</p>
</div>

new Vue({
  el: '#app',
  data: {
    counter: 0
  }
})

메소드 이벤트 핸들러

<div id="app">
  <button v-on:click="greet">Greet</button>
</div>

var vm = new Vue({
  el: '#app',
  data: {
    name: 'Vue.js'
  },
  methods: {
    greet: function (event) {
      alert('Hello ' + this.name + '!')
      // `event` 는 네이티브 DOM 이벤트입니다
      if (event) {
        alert(event.target.tagName)
      }
    }
  }
})

// 또한 JavaScript를 이용해서 메소드를 호출할 수 있습니다.
vm.greet() // => 'Hello Vue.js!'

인라인 메소드 핸들러

<div id="app">
  <button v-on:click="say('hi')">Say hi</button>
  <button v-on:click="say('what')">Say what</button>
</div>

new Vue({
  el: '#app',
  methods: {
    say: function (message) {
      alert(message)
    }
  }
})

<button v-on:click="warn('Form cannot be submitted yet.', $event)">
  Submit
</button>

new Vue({
  el: '#app',
  methods: {
    warn: function (message, event) {
    // 이제 네이티브 이벤트에 액세스 할 수 있습니다
        if (event) event.preventDefault()
        alert(message)
    }
  }
})

이벤트 수식어

Vue는 v-on 이벤트에 이벤트 수식어를 제공합니다.

• .stop
• .prevent
• .capture
• .self
• .once
• .passive

<!-- 클릭 이벤트 전파가 중단됩니다 -->
<a v-on:click.stop="doThis"></a>

<!-- 제출 이벤트가 페이지를 다시 로드 하지 않습니다 -->
<form v-on:submit.prevent="onSubmit"></form>

<!-- 수식어는 체이닝 가능합니다 -->
<a v-on:click.stop.prevent="doThat"></a>

<!-- 단순히 수식어만 사용할 수 있습니다 -->
<form v-on:submit.prevent></form>

<!-- 이벤트 리스너를 추가할 때 캡처모드를 사용합니다 -->
<!-- 즉, 내부 엘리먼트를 대상으로 하는 이벤트가 해당 엘리먼트에서 처리되기 전에 여기서 처리합니다. -->
<div v-on:click.capture="doThis">...</div>


<!-- event.target이 엘리먼트 자체인 경우에만 트리거를 처리합니다 -->
<!-- 자식 엘리먼트에서는 안됩니다 -->
<div v-on:click.self="doThat">...</div>

관련 코드가 동일한 순서로 생성되므로 수식어를 사용할 때 순서를 지정하세요.
v-on:click.prevent.self를 사용하면 모든 클릭을 막을 수 있으며
v-on:click.self.prevent는 엘리먼트 자체에 대한 클릭만 방지합니다.

키 수식어

Vue는 키 이벤트를 수신할 때 v-on에 대한 키 수식어를 추가할 수 있습니다.

<!-- only call `vm.submit()` when the `key` is `Enter` -->
<input v-on:keyup.enter="submit">

KeyboardEvent.key를 통해 노출된 유효 키 이름을 케밥 케이스로 변환하여 수식어로 사용할 수 있습니다.

<input v-on:keyup.page-down="onPageDown">

$event.key === 'PageDown' 일 때에만 호출됩니다.

• Key Codes

<input v-on:keyup.13="submit">

key code 에 대한 alias 제공 ex) .enter, .tab, .delete, .esc,.space ...

• 시스템 수식어 키 목록 - .ctrl, .alt, .shift

• 정확한 조합을 요구하는 .exact 수식어

• 마우스 버튼 수식어 - .left, .right, .middle

bit.ly/3fXOzon

인프런 인강 선착순 30% 마지막 할인 쿠폰 - Vue.js 핵심 강의!

bit.ly/2TtRHis

[Vue.js 입문] 초보 실전 웹앱 개발 - 1부 : vue 개념 ~ 핵심 - 인프런