Vue.js 데이터 양방향

이벤트 키워드를 통해서 버튼을 입력하였을 때, 데이터를 변화하고 수신할 수 있다.

keyup 키워드

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>

Vue.js에서 HTML로 된 리스너를 사용하는 이유

모든 뷰 핸들러 함수와 표현식은 현재 뷰 처리 하는 ViewModel에 엄격히 바인딩 되기 때문에 유지보수가 어렵지 않다. 실제로 v-on을 사용하면 몇가지 이점이 있어서 HTML로 된 리스너를 사용한다.

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

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

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