05. 데이터 양방향 바인딩 (Data Two Way Binding)

간단간단으로 input 박스에 입력시 하단에 실시간으로 입력한 값 동시에 노출하기 이벤트 구현

VUE 가이드에서 제공하는 이벤트중 keyup을 사용해 본다,

몸풀기로 keyup 사용시 해당 글자들을 console창에 노출 시키도록 해보자..

먼저 input 박스에 keyup을 선언하는데, v-on:keyup 으로 선언할 수 있지만

 

위에 이미지 처럼 v-on: 대신 @ 로 대체할 수 있다.

keyup에 사용할 메소드도 생성한뒤 .

브라우저에서 글을 입력하면(key 이벤트를 말한다)

콘솔창에 입력한 글자에 대한 내용들을 확이할 수 있다.

 

keyboardEvent 를 클릭해서 보면 다양한 키-밸류 들을 확인할 수 있다.

이중 우린 Target 에 Value 를 이용 양방향 데이터 바인딩을 해보겠다.

먼저 입력받을 input 박스 와 문자열을 출력할 {{}} 을 잘 확인한뒤 

위에 콘솔에서 확인한 target.value 를 text 에 그대로 넣어주는 메소드 선언 !

브라우저에서 INPUT 박스에 문자 222 를 입력하니 아래 {{ }} 선언한 곳에도 같이 222 가 동시에 입력되는 걸 확인할 수 있다.

 

더 간단히 !!?

 

 

위에 이벤트를 @keyup="updateText" 대신 v-model ="변수명 " 을 입력하면 (본인은 data에 선언한 text 변수를 사용하였음 )

 

그럼 위에 구현한 이벤트가 엄청 간단해 지는걸 확인할 수 있다.