이벤트 키워드를 통해서 버튼을 입력하였을 때, 데이터를 변화하고 수신할 수 있다.
keyup키워드를 이용하여 키를 입력할 시, methods를 실행하도록 한다.
사용방법
@keyup.(키번호or키명칭)
<div id = app>
<input type = "text" @keyup:"keyfunction">
{{keyupText}}
</div>
<script>
new Vue({
el:'#app',
data:{
keyupText:''
},
methods:{
keyfunction:function(event){
this.keyupText = event.target.value;
}
}
});
</script>
.ctrl
.alt
.shift
.meta
<!-- Alt + C --> <input @keyup.alt.67="clear"> <!-- Ctrl + Click --> <div @click.ctrl="doSomething">Ctrl+Click</div>
모든 뷰 핸들러 함수와 표현식은 현재 뷰 처리 하는 ViewModel에 엄격히 바인딩 되기 때문에 유지보수가 어렵지 않다. 실제로 v-on을 사용하면 몇가지 이점이 있어서 HTML로 된 리스너를 사용한다.
HTML 템플릿을 간단히 하여 JavaScript 코드 내에서 핸들러 함수 구현을 찾는 것이 더 쉽다.
JavaScript에서 이벤트 리스너를 수동으로 연결할 필요가 없으므로 ViewModel 코드는 순수 로직과 DOM이 필요하지 않는다. 이렇게 하면 테스트에 용이하다.
ViewModel이 파기되면 모든 이벤트 리스너가 자동으로 제거 됩니다. 이벤트 제거에 대한 걱정이 필요 없어진다.