Vue.js 공부 기록(3) - 뷰 데이터 바인딩(Data-Binding)

🔍 데이터 바인딩이란?

바인딩이란 묶는다는 의미로, 웹 프로그래밍에서는 UI를 통해 표시하고자 하는 데이터를 실제 데이터와 연결해주는 프로세스를 의미한다.

 

🔍 Vue.js 데이터 바인딩

Vue.js는 대부분의 html 태그에 바인딩을 제공한다.

 

input 태그의 text 박스에 Vue에서 정의한 inputData 데이터를 바인딩해보면 hello가 잘 들어간다.

 

Vue.js에서 데이터를 바인딩하기 위해서는 예약어 v-bind를 사용해야 한다. (예약어는 생략 가능하다.)

v-bind:속성명="데이터 또는 함수"
:속성명="데이터 또는 함수" //생략 버전

 

input 태그의 type까지 바인딩 가능하다.

 

<a> 태그의 link를 바인딩하려면 아래와 같이 작성하면 된다.

함수 바인딩

실행 결과