이벤트 핸들링

이벤트 청취

v-on 디렉티브를 사용해 DOM 이벤트를 듣고 트리거 될 때, JS를 실행한다.

<div id="example-1"> <button v-on:click="counter += 1">Add 1</button> <p>위 버튼을 클릭한 횟수는 {{ counter }} 번 입니다.</p> </div>

var example1 = new Vue({ el: '#example-1', data: { counter: 0 } })

메소드 이벤트 핸들러

많은 핸들러의 로직은 복잡하다.

v-on 속성값에 코딩하는것은 비효율 적이다.

v-on으로 메소드를 호출하는게 효율적이다,

<div id="example-2"> <!-- `greet`는 메소드 이름으로 아래에 정의되어 있습니다 --> <button v-on:click="greet">Greet</button> </div>

var example2 = new Vue({ el: '#example-2', data: { name: 'Vue.js' }, // 메소드는 `methods` 객체 안에 정의합니다 methods: { greet: function (event) { // 메소드 안에서 사용하는 `this` 는 Vue 인스턴스를 가리킵니다 alert('Hello ' + this.name + '!') // `event` 는 네이티브 DOM 이벤트입니다 if (event) { alert(event.target.tagName) } } } })

인라인 메소드 핸들러

메소드 이름을 직접 바인딩 하는 대신 인라인 JS구문에 메소드를 사용이 가능하다.

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

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

때론 인라인 명령문에서 DOM의 이벤트를 접근해야 할 때가 있을 수 있다.

그러면 $event를 사용하면 된다.

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

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

이벤트 수식어

이벤트 내부에서 event.preventDefault() 또는 event.stopPropagation()을 호출하는것은 보편적인 일이다.

메소드 내에서 이 작업을 처리할 수 있지만, v-on이벤트 수식어를 제공한다.

<!-- 클릭 이벤트 전파가 중단됩니다 --> <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>

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

2.1.4에 새로 추가됨

<!-- 클릭 이벤트는 최대 한번만 트리거 됩니다. --> <a v-on:click.once="doThis"></a>

키 수식어

키보드이벤트를 청취할 때, 종종 키 코드를 확인해서 작업해야될 때가 있다.

v-on수식어를 추가해 쉽게 작업이 가능하다.

 

<!-- keyCode가 13일 때만 vm.submit()을 호출합니다 --> <input v-on:keyup.13="submit">

모든 keycode를 제공하지 않고, 일반적으로 많이 사용하는 키를 제공한다.

<!-- 위와 같습니다 --> <input v-on:keyup.enter="submit"> <!-- 약어 사용도 가능합니다 --> <input @keyup.enter="submit">

키 수식어 별칭의 전체 목록입니다.

• .enter
• .tab
• .delete (“Delete” 와 “Backspace” 키 모두를 캡처합니다)
• .esc
• .space
• .up
• .down
• .left
• .right

또한 전역 config.keyCodes 객체를 통해 사용자 지정 키 수식어 별칭을 지정할 수 있습니다.

// v-on:keyup.f1 이 가능합니다 Vue.config.keyCodes.f1 = 112

수식어 키 목록

2.1.0에 새로 추가되었습니다.

다음 수식어를 사용해 해당 수식어 키가 눌러진 경우에만 마우스 또는 키보드 이벤트 리스너를 트리거 할 수 있습니다.

• .ctrl
• .alt
• .shift
• .meta

참고 : 매킨토시 키보드에서 meta는 command 키 입니다 (⌘). Windows 키보드에서 meta는 windows 키 (⊞) 입니다. Sun Microsystems 키보드에서 meta는 단색의 다이아몬드 (◆)로 표시됩니다. 특정 키보드의 경우, 특히 MIT 및 Lisp 시스템 키보드와 Knight 키보드, space-cadet 키보드와 같은 제품에는 “META” 레이블이 지정됩니다. Symbolics 키보드에서 메타는 “META” 또는 “Meta”로 표시됩니다.

예제:

<!-- Alt + C --> <input @keyup.alt.67="clear"> <!-- Ctrl + Click --> <div @click.ctrl="doSomething">Do something</div>

수식어 키는 일반 키와 다르며 keyup 이벤트와 함께 사용되면 이벤트가 발생할 때 수식어 키가 눌려있어야 합니다. 즉,keyup.ctrl는 ctrl을 누른 상태에서 키를 놓으면 트리거됩니다. ctrl 키만 놓으면 트리거되지 않습니다.

마우스 버튼 수식어

2.2.0 버전에서 추가됨

• .left
• .right
• .middle

위 수정자는 특정 마우스 버튼에 의해 트리거 된 이벤트로 핸들러를 제한합니다.

왜 HTML로 된 리스너를 사용합니까

이 모든 이벤트 청취 접근 방법이 우려 사항 분리(“separation of concerns”)에 대한 오래된 규칙을 어긴다고 생각할 수 있습니다. 모든 뷰 핸들러 함수와 표현식은 현재 뷰 처리 하는 ViewModel에 엄격히 바인딩 되기 때문에 유지보수가 어렵지 않습니다. 실제로 v-on을 사용하면 몇가지 이점이 있습니다.

1. HTML 템플릿을 간단히 하여 JavaScript 코드 내에서 핸들러 함수 구현을 찾는 것이 더 쉽습니다.

2. JavaScript에서 이벤트 리스너를 수동으로 연결할 필요가 없으므로 ViewModel 코드는 순수 로직과 DOM이 필요하지 않습니다. 이렇게 하면 테스트가 쉬워집니다.

3. ViewModel이 파기되면 모든 이벤트 리스너가 자동으로 제거 됩니다. 이벤트 제거에 대한 걱정이 필요 없어집니다.