{{데이터바인딩}}이란, js의 데이터를 html에 꽂아넣는 문법이라고 한다.
원래의 쌩 js에서는, 이를 위해 document.getElementByID().innerHTML =어쩌구
이런식으로 길게길게 코드를 짰어야 했으나, vue에서는 간단하다!
js에서는 변수에다가 값을 넣고 어쩌구 해서 썼어야 했다면,
vue에서는
data(){
return{
데이터명: 데이터값
},
}이 안에다가 사용할 데이터들을 때려넣는다. 이곳을 데이터 보관함이라고 보면 될듯하다.
형식은 key:value와 같은 익숙한 object형으로 한다.
그래서 어떻게 바인딩을 하느냐면? 위에있는 <template>html 태그에 구멍을 뚫듯이, 데이터를 바인딩할 부분들에 {{데이터}}을 적어주면 된다.
대충 하는법은 배웠으나, 그래서 이걸 왜 하는데??라는 의문이 들어야 한다.
첫번째 이유는, 원활한 변경을 위함이다. 예를들어, 쇼핑몰의 물건의 가격은 수시로 변동될 수 있다.
가격을 일일히 하드코딩해 넣으면 수정하기 매우 힘들 수 있다.
두번째로, 가장 중요한 이유는 vue가 제공하는 자동 렌더링을 이용하기 위함이다.
data영역의 값을 변경하면 해당 data와 관련된 html에 실시간으로 반영된다는 것이다!편-리
이걸 이용해서 웹,앱을 만들고 부드럽게 휙휙 바뀔수 있는것임.
바뀔 일이 없는 것들 (예를들어 쇼핑몰 이름이라던지..)은 굳이 바인딩을 할 필요는 없는것.
마찬가지로, 스타일도 이런식으로 바인딩이 가능하다.
데이터바인딩을 html의 속성에 하고 싶을 경우에는, {{}}대신 콜론 : 을 붙인다.
스타일: 'color:blue'
<h1 class = "title':style = "스타일">제목</h1>그외에 id, class 등에도 동일하게 적용이 가능하다. 재밋내..
