Vue 데이터 바인딩 중괄호, 대괄호

Vue에서 Html부분에 사용하는 중괄호와 대괄호에 대한 설명이다.

데이터 바인딩할때 중괄호, 대괄호에 따라 작동 방식이 다르다. 

 

1. 먼저 기본적인 데이터 바인딩

이해를 돕기위해 기초적인 내용이지만 추가했다.

 

1) v-bind: 는 :로 축약된다.

2) v-bind: 문법을 사용하면, 단순히 String으로서 받아들이는 것이 아니라 script에 정의되어 있는 것에 따라 동적으로 바인딩 된다.(한 마디로 변수처럼 작동한다.)

 

- div의 :class에 초기화 되는 값인 classObject는 변수명으로서 동작하여 data의 classObject의 값인 'aaa'를 가져온다. ( :class로 :이 있기 때문에)

- classObejct에 할당된 'aaa'가 동적으로 바인딩된다. 그리고 style의 .aaa속성이 작용하여 background-color가 입혀진다.

 

 

여기서부터는 예제로 Vue공식사이트를 참고했다.

https://kr.vuejs.org/v2/guide/class-and-style.html

 

2. 중괄호를 이용한 데이터 바인딩

달리말하면 자바스크립트 객체형태( { 속성1 : 값, 속성2 : 값} )로 데이터를 바인딩할때 처리하는 방식이다.

중요한건, 속성의 값이 True이면 속성명을 그대로 사용하고, False이면 사용 안한다.

 

위에서 static은 :v-bind를 사용하지 않았으므로 그대로 바인딩되고 active는 값이 true이므로 동적으로 바인딩되었으며 text-danger는 값이 false이므로 바인딩되지 않았다.

 

 

3. 대괄호를 이용한 데이터 바인딩

달리말하면 자바스크립트 배열타입( [변수1, 변수2] )으로 데이터를 바인딩할때 처리하는 방식이다.

 

 

:v-bind된 값을 변수명으로 인식하여 변수의 값을 가져와 동적으로 바인딩한다.