-
[Vue.js] 양방향 데이터 바인딩 v-modelFront-End/Vue.js 2022. 11. 13. 13:12
VueJs의 꽃이라고 할 수 있는 v-model에 대해 정리하려 한다.
📑 양방향 데이터 바인딩
지금까지 앞에서 다룬 vue.js에 대한 내용들은 '단방향 데이터 바인딩'이었다. 뷰 인스턴스의 data 객체가 가지고 있는 정보를 HTML 코드 내로 바인딩하여 그 값을 확인했다. methods 내의 함수로 데이터를 변경하면 변경하는 즉시 값이 변하는 것을 확인했다.
즉) Vue 인스턴스 -> Template와 같은 방향으로 한 방향으로 데이터에 접근할 수 있었다. 이게 바로 단방향 데이터 바인딩이다. 그렇다면 양방향 데이터 바인딩은?? 말 그대로 vue 인스턴스에서 초기값 설정과 같이 값을 저장해두면 화면에서 볼 수 있고, 화면에서 어떤 값을 입력한다면 그것이 Vue 인스턴스에 저장되는 것이다.
이렇게 양방향 데이터 바인딩을 가능하게 해주는 디렉티브가 바로 v-model이다.
📑 폼 입력 바인딩
양방향 데이터 바인딩이 자주 사용되는 대표적인 예가 바로 form 을 입력할 수 있는 input 태그이다.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="app"> <input type="text" v-model="name"> {{name}} </div> <script> new Vue({ el : '#app', data : { name : "woni" } }) </script> </body> </html>
input 태그에 v-model="name"을 적었더니 사용자가 값을 입력하면 그거에 맞춰 {{name}}의 값도 바뀌는 걸 확인할 수 있다.
참고 : [맨땅에VueJS]양방향 데이터 바인딩 v-model / two way binding / VueJS Directive | by Hoza Cho | Medium
반응형'Front-End > Vue.js' 카테고리의 다른 글
[Vue] Vue.js npm 방식으로 설치하기 , VSCode 프로젝트 생성 (0) 2022.11.21 [Vue.js] 기본 문법, watch와 computed 비교 (0) 2022.11.14 [Vue.js] 계산된 속성 computed vs methods (0) 2022.11.13 [Vue.js] 기본 문법 (v-on 이벤트리스너) (0) 2022.11.13 [Vue.js] 기본 문법 (v-once, v-html) (0) 2022.11.13