Vuejs 2 . 데이터 양방향 바인딩 (Data Two Way Binding - v-model)

아래는 <input>태그에 텍스트를 입력하면 아래에 미리보기가 지원되는 기능을 만든 예제입니다.

 

먼저 <input>태그 아래 데이터의 text라는 변수의 값을 받아오는 {{ text }}를 만들었습니다.

그 다음 <input>태그에 v-on:keyup속성을 넣어주었습니다. 이 때 v-on:keyup은 @keyup으로 줄여 사용하였습니다.

 

**keyup 속성이란? 키보드가 눌러졌다 올라올때 이벤트를 주는 속성입니다.

 

@keyup의 속성값으로 updateText라는 함수를 넣어주고,

메소드에 updateText 함수를 만들었습니다.

여기서 this.text는 데이터의 text이고 target.value는 <input>태그에 텍스트를 작성하였을때의 값을 console.log를 통해 어디에 저장되는지 확인해보니 target.value 라는 곳에 저장이되어 this.text를 event.target.value로 정의한것입니다.

 

이렇게 하면 <input>태그에 글을 작성할때 실시간으로 미리보기가 되는것을 확인할 수 있습니다.

 

 

이것을 양방향 바인딩을 이용하여 바꿔보겠습니다.

 

 

아주 간단하게 v-model 속성을 사용하여 양방향 바인딩을 해주었습니다.

양방향 바인딩이 필요할땐 v-model 속성을 사용하면됩니다.

 

 

 

 

**위의 정리 내용은 유튜버 코지코더님의 Vue.js강의를 보고 정리한 내용입니다.

유튜브를 보면서 정리된 글을 보면 더 좋을것같아요!