1. 양방향 데이터 바인딩
양방향 데이터 바인딩이라는 어려운 말이 등장했습니다만 차근차근 생각해보면 크게 어렵지 않습니다. 왜냐하면 우리가 지금까지 배운 것들이 용어를 사용하지는 않았지만 바로 ‘단방향 데이터 바인딩’이었으니까요. 그렇다면 이제 지금까지 우리가 배운것에 비추어 ‘양방향 데이터 바인딩'을 추론해봅시다.
우리는 지금까지 뷰 인스턴스의 data 객체가 가지고 있는 정보를 HTML 코드 내로 바인딩하여 그 값을 확인했습니다. methods 내의 함수로 데이터를 변경하면 변경하는 즉시 값이 변하는 것을 확인했습니다.
즉, Vue 인스턴스 → Template 와 같이 한 방향으로 데이터에 접근 할 수 있었습니다. 이러한 개념을 ‘단방향 데이터 바인딩'이라고 합니다. 그렇다면 양방향 데이터 바인딩은 어떤 개념일까요?
네, Vue 인스턴스 ⇄ Template 과 같이 두 방향 모두 데이터에 접근 할 수 있도록 하는 것을 양방향 데이터 바인딩라고 합니다. (정확히 설명을 하려면 DOM의 개념을 이해해야하지만 여기서는 일단 넘어가도록 하겠습니다.)
이 양방향 데이터 바인딩을 가능하게 해주는 디렉티브가 바로 v-model 입니다. 그럼 예제를 통해서 v-model에 대해 좀 더 자세히 알아보도록 합시다.
2. 폼 입력 바인딩
양방향 데이터 바인딩이 자주 사용되는 대표적인 예가 바로 폼 입력을할 수 있는 input 태그입니다. 공식 문서에서도 폼 입력을 예로 v-model 을 설명하고 있습니다.
HTML 에 input 태그를 생성하고 v-model 디렉티브를 설정합니다. 여기서는 간단히 data 객체 내에 name을 생성하고 v-model이 이 name 을 바라보도록 설정해주었습니다.
[JavaScript]
[HTML]
자, 보이시나요?
input 태그의 v-model 디렉티브를 통해 Vue의 data 에 직접 데이터를 수정할 수 있게 되었습니다. {{ name }} 은 단방향 데이터 바인딩으로 Vue 인스턴스가 가지고 있는 정보를 보여주는 역할만을 하는데 input 태그 내의 값을 변경해주자 여기에 보여지는 값도 바로 변경되는 것을 확인하실 수 있습니다.
