단방향 데이터 바인딩
하나의 데이터가 한 쪽 방향으로만 영향을 미치는 것.
데이터가 화면에 영향을 미치는 건 가능하지만 화면에서 입력된 데이터가 실제 데이터를 업데이트 시킬 수 없다.
양방향 데이터 바인딩
하나의 데이터가 양쪽 방향으로 서로 영향을 미치는 것.
input에 데이터를 입력 시 msg 데이터도 변경이 된다.
v-model
v-model 디렉티브를 사용하면 value와 이벤트 바인딩 없이 양방향 데이터 바인딩을 구현할 수 있다.
v-model은 내부적으로 서로 다른 속성을 사용하고 서로 다른 입력 요소에 서로 다른 이벤트를 전송한다. 따라서 입력 요소가 무엇인지에 따라 해당하는 속성을 외울 필요가 없다.
단 한글을 입력할 때는 글자가 완성이 되어야 반영이 되기 때문에 :bind와 이벤트 핸들러로 풀어쓰는 방법을 사용해야 한다.
input
checkbox
checkbox에서 v-modle을 사용하면 기존 속성을 무시한다.
boolean 데이터가 아닌 배열을 연결하면 다중의 체크 기능을 구현할 수 있다. 이 때 value가 item으로 들어간다.
radio
radio 버튼은 단일 선택을 기준으로 하기 때문에 배열이 아닌 빈 문자열을 연결한다.
textarea
textarea에서 v-model 사용 시 white-space: pre-line 속성을 활용하여 제대로 줄바꿈이 되면서 렌더링을 가능하게 할 수 있다.
select
value에 지정된 값이 데이터에 저장된다.
value와 태그 사이의 text가 같으면 value 속성을 생략할 수 있다.
데이터를 사용해서 select를 구현할 수 있다.
수식어
.laze
input 이벤트에서 chnage 이벤트로 변경한다. (enter를 눌러야 변경)
<!-- "input" 대신 "change" 이벤트 후에 동기화됨 -->
<input v-model.lazy="msg" />.number
사용자 입력이 자동으로 숫자로 유형 변환되도록 하려면, v-model 수식어로 .number를 추가한다.
<input v-model.number="age" />.trim
사용자 입력의 공백을 자동으로 제거하려면 v-model 수식어로 .trim을 추가한다.
<input v-model.trim="msg" />