vue.js - 이벤트 헨들링
이벤트 제어
- v-on 디렉티브를 이용해서 이벤트를 등록할 수 있습니다.
- v-on 대신 약어 @를 이용할 수 있습니다.
- v-on 디렉티브를 이용해서 등록한 이벤트는 vue.js에 의해서 관리합니다.
- 이벤트가 등록된 DOM요소가 제거되면 vue.js가 알아서 이벤트를 제거합니다.
- 원본 DOM 이벤트에 접근할 경우 $event 라는 변수를 사용해 전달할 수 있습니다.
이벤트 수식어
- v-on 디렉티브 뒤에 .(수식어명)을 이용해서 사용합니다.
input태그에서 enter키 이벤트를 인식해서 바꿔주는 예제
<div id='keyup'>
<h1></h1>
<input id='input' type='text' v-on:keyup.enter='setvalue()' />
</div>
<script>
const key = new Vue({
el: '#keyup',
data: {val: 'val'},
methods: {
setvalue: function() {
this.val = document.getElementById('input').value;
}
}
})
</script>
- 이벤트 수식어는 여러개 조합하여 사용할 수 있습니다.
- 이때, exact 수식어를 같이 사용하지 않으면, 다른 키가 같이 눌린 경우도 동작하므로, 수식어를 여러개 사용할 경우 exact를 사용하는 것이 좋습니다.
<!-- Alt 또는 Shift와 함께 눌린 경우에도 실행됩니다. -->
<button @click.ctrl="onClick">A</button>
<!-- Ctrl 키만 눌려있을 때만 실행됩니다. -->
<button @click.ctrl.exact="onCtrlClick">A</button>
<!-- 아래 코드는 시스템 키가 눌리지 않은 상태인 경우에만 작동합니다. -->
<button @click.exact="onClick">A</button>
<!-- mousedonw일때는 dothis를 mouseup일때는 dothat을 실행합니다. -->
<button v-on="{ mousedown: dothis, mouseup: dothat}">버튼</button>
- .stop, .prevent, .once, .enter, .tab, .meta 등등 많은 수식어가 있습니다.
- 더 많은 수식어는 공식사이트에서 확인해 보시기 바랍니다.
v-on 디렉티브 사용할 때의 이점
- HTML 템플릿을 간단히 하여 javascript 코드 내에서 핸들러 함수 구현을 찾는 것이 쉽습니다.
- javascript에서 이벤트 리스너를 수동으로 연결할 필요가 없어 ViewModel 코드는 순수 로직과 DOM이 필요하지 않습니다. 그래서 테스트가 쉬워집니다.
- ViewModel이 파기되면 모든 이벤트 리스너가 자동으로 제거됩니다.
Vue.js는 SoC(Separation of Concerns)규칙을 어기는 것일까?
- Soc가 파일 타입 분리와 같지는 않습니다.
- Vue에서는 세 개의 거대한 레이어(구조(HTML), 표현(CSS), 동작(JavaScript))로 나누는 대신 느슨하게 결합된 컴포넌트로 나누는 것을 더 중요하게 생각합니다.
- 컴포넌트 내부에서 템플릿, 로직 및 스타일이 본질적으로 결합되어 배치되면 컴포넌트의 응집력과 유지 보수성이 향상됩니다.
- 싱글 파일 컴포넌트 대신 별도의 파일로도 분리할 수 있습니다.
- https://vuejs.org/v2/guide/single-file-components.html#What-About-Separation-of-Concerns
ps. 찾아보고 공부하면서 정리하는 내용이라 틀릴 수 있음을 알려드립니다.
참고