vue.js 데이터바인딩

데이터 바인딩

• javascript 데이터를 HTML에 꽂아넣는 문법
• 데이터의 변경이 자주 일어 날때 사용
• 사용하는 이유
  • HTML에 하드코딩 시 변경하기 어려워 vue의 실시간 자동 렌더링 기능을 이용하기 위해 사용
  • 데이터가 변경되면 자동으로 변경되기 때문에 웹, 앱을 만들때 편함

사용방법

• HTML에서 사용할 때는 {{자료이름}}으로 사용
• 속성을 나타낼때는 :속성값 = 자료이름으로 사용
• 예시(deco, price에 데이터 바인딩 사용)

  <div>
    <h4 class="red" :style="deco">test</h4>
    <p>{{ price }}won</p>
  </div>

추가: 속성 데이터 바인딩에서 변수 사용

• javascript ES6 문법 중 템플릿 리터럴 사용해서 데이터 바인딩
  • 백틱문자(`) 사용하여 문자열 내에 ${변수명}을 사용하여 변수 입력 가능
  • 예시

    <div class="profile" :style="{background : `url(${p.userImage})`}"></div>