[Vue.js] 13. 폼 입력 바인딩

단방향 데이터 바인딩

data()에 있는 데이터를 단방향으로 바인딩 한 것이라 input의 값을 수정하더라도 변화가 없다.

양방향 데이터 바인딩

@input 을 활용하여 event.target.value를 할당하면 input 태그로 받아온 데이터를 msg에 바인딩하여

양방향 데이터 바인딩을 구현할 수 있다.

 

양방향 데이터 바인딩 간소화 (1)

@input에 직접 msg에 바인딩하는 구문을 작성하면 양방향 데이터 바인딩을 간소화 할 수 있다.

 

양방향 데이터 바인딩 간소화(2)

v-model 디렉티브를 사용하면 (1)보다 더욱 간소화 할 수 있다.

다만, 이 방법은 한글에서는 제대로 동작하지 않는다.

 

한글은 초성 중성 종성이 모두 모여 한 글자가 되므로 한 글자가 완성되기 전까지는 데이터 바인딩이 이뤄지지 않는 것.

따라서 한글을 부드럽게 양방향 데이터 바인딩을 하기 위해선 (1)의 방법을 사용해야 한다.