🔍데이터 양방향 바인딩 지금까지는 뷰 인스턴스의 data 객체가 가지고 있는 정보를 HTML 코드 내로 바인딩하여 값을 확인했다. => 단방향 데이터 바인딩 두 방향 모두 데이터에 접근할 수 있도록 하는 것을 양방향 데이터 바인딩이라고 한다. 🔍폼 입력 바인딩 양방향 데이터 바인딩이 자주 사용되는 대표적인 예. v-model v-model 디렉티브를 사용하여 폼 input과 textarea 엘리먼트에 양방향 데이터 바인딩을 생성함. 입력 유형에 따라 엘리먼트를 업데이트하는 올바른 방법으로 자동 선택함. v-model은 내부적으로 서로 다른 속성을 사용하고 서로 다른 입력 요소에 대해 서로 다른 이벤트를 전송함. 🔍예제 텍스트박스에 입력하는 글자가 실시간으로 보여지도록 하고 싶을 때, 양방향 데이터 바인딩..

🔍 데이터 바인딩이란? 바인딩이란 묶는다는 의미로, 웹 프로그래밍에서는 UI를 통해 표시하고자 하는 데이터를 실제 데이터와 연결해주는 프로세스를 의미한다. 🔍 Vue.js 데이터 바인딩 Vue.js는 대부분의 html 태그에 바인딩을 제공한다. input 태그의 text 박스에 Vue에서 정의한 inputData 데이터를 바인딩해보면 hello가 잘 들어간다. Vue.js에서 데이터를 바인딩하기 위해서는 예약어 v-bind를 사용해야 한다. (예약어는 생략 가능하다.) v-bind:속성명="데이터 또는 함수" :속성명="데이터 또는 함수" //생략 버전 input 태그의 type까지 바인딩 가능하다. 태그의 link를 바인딩하려면 아래와 같이 작성하면 된다. 함수 바인딩 실행 결과