본문 바로가기
frontend/vue

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

by 플로거 2020. 5. 11.

이벤트 핸들링

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 핵심 강의!

강좌명 - [Vue.js 입문] Javascript Real 웹앱 개발 - 1부 : vue 개념 ~ 핵심 실습 인프런 인터넷 강의 선착순 100명 30% 할인쿠폰! 강의 수강평도 부탁드립니다. bit.ly/2TtRHis [Vue.js 입문] 초보 실전 웹앱 개..

plogger.tistory.com

bit.ly/2TtRHis

 

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

이 강의를 수강하시면 Vue.js 와 관련된 기본적인 개념부터 Real 웹앱 개발을 해 볼 수 있습니다. 이 강의는 1부 기본기 이며, 2부와 3부를 통해서 실제 Real 웹앱을 구현해 보도록 하겠습니다. 초급 ��

www.inflearn.com

댓글