[Vue] Vue의 데이터바인딩 문법

1. 데이터바인딩 ?

 

• 자바스크립트 변수 혹은 데이터를 HTML에 넣는것을 말한다.

 

일반적으로 자바스크립트에서는 해당 과정을 아래 코드를 통해 데이터바인딩을 했다.

 

 

JS에서의 데이터바인딩

 

 

하지만 Vue에서는 이렇게 길게 작성할 필요가 없다.

 

 

 

 

 

 

2. Vue에서의 데이터바인딩

 

• 데이터보관함 생성

아래 사진을 보면 빨간색으로 표시해둔 부분을 Vue의 데이터 보관함이라고 한다.

 

 

데이터보관함

 

 

• 그 후 보관함 안에 모든 데이터를 object 자료형으로 저장하면 된다.

 

object 자료형 작성법

 

 

 

• 이렇게 작성한 데이터를 HTML에 넣기 위해서는 두개의 중괄호 안에 데이터 이름을 작성하면 된다.

 

 

 

 

 

 

 

3. 데이터바인딩을 하는 이유

 

    1. HTML에 모든 데이터들을 하드코딩 해두면 나중에 하나하나 변경하기가 어렵다.

        ( 특히 가격과 같은 가변적인 데이터들은 더욱 까다롭기 때문에 데이터바인딩을 사용 )

 

★ 반대로 쇼핑몰의 이름 등 자주 바뀌지 않는 데이터는 굳이 바인딩을 하지 않아도 상관없음

 

 

    2. Vue의 실시간 자동 렌더링 기능을 사용하기 위해

        -> Vue에서 데이터를 변경하면 해당 데이터와 관련 있는 모든 HTML 코드에 반영되어 새로고침 된다.

 

 

    3. html 속성도 바인딩 가능

        ( style, id, class 와 같은 모든 속성 또한 바인딩 가능 )

 

이런식으로 스타일을 작성하여

 

HTML 태그에 삽입 가능