[ VueJS 입문 ] VueJS의 정보 저장소 data / VueJS data

 

• Vue선언 - https://jsfiddle.net/sunghun/th2m9ws7/

VueJS의 핵심은 간단한 템플릿 구문을 사용해 선언적으로 DOM에 데이터를 렌더링하는 것. 쉽게 면에 렌더링 되는 HTML 코드들을 컨트롤 하는 것. New Vue({ })는 이러한 역할을 할 Vue를 선언하고 정의해주는 역할.

 

• Vue의 정보 저장소 data

Vue는 여러 속성(property)들을 가지는데 그 중 data는 Vue에서 사용할 정보들을 저장하는 곳으로 object 형태로 정보들을 가지고 있다. 우리는 title이란 변수를 만들어 "안녕 VueJS!"라는 값을 넣어주었다. 그럼 이 Vue는 "안녕 VueJS!" 라는 값을 들고 title 값이 어디로 가야할지 찾는다.

 

• 그 값의 위치는 여기 {{ Mustache(interpolation) }}

data안에 저장된 값은 어디에 들어가야하나? 라는 질문에 “여기요!”라고 답해주는 역할이 바로 {{ mustache }}이다. 그 모양이 수염을 닮았다고해서 “Mustache” syntax (interpolation, 보간법)라고 불리는 이 기호 안에 vue에서 선언된 속성 내의 변수나 함수 등을 호출하여 사용할 수 있다. 여기서는 data.title의 값으로 지정된 “안녕 VueJS!”가 HTML의 p 태그 안에 들어가 출력 된 것을 보실 수 있다.

 

• 반응형 data

Vue는 Vue 내의 정보와 DOM이 연결되어 모든 것이 반응형으로 작동하게 해준다. 선언한 data.title 값을 원하시는 값으로 변경 후 run을 누른다면 HTML 안에 미리 작성된 {{ title }} 부분에 변경된 내용이 들어간다. 즉 html 원하는 부분을 반응형으로 만들 수 있는 것 . 이것이 Vue의 역할이다.