[vue.js]HTML에 Vue 데이터바인딩

이용만·2023년 12월 27일
0

데이터 바인딩 : JS 데이터를 HTML에 꽂아넣는 문법.
-> 가변데이터가 있을 때 사용하면 좋다!

데이터 바인딩을 하는 이유
1) 유지보수

  • 예를들어 쇼핑몰은 가격이 매일 변동되니까, 그걸 데이터로 저장해놓으면 수정이 나중에 편리하다.
    2) Vue의 실시간 렌더링 기능을 쓰기 위해
  • Vue는 data가 변경되면 data와 관련된 HTML에 실시간으로 반영된다. price1이 60에서 70으로 조정하면 {{price1}}에도 변경사항이 바로 적용된다.
    이런 사이트를 웹앱이라고 한다.

주의해야할 점

  • 데이터 바인딩 시 : {{ data }}
  • HTML 속성 데이터바인딩 시 : :style:스타일
profile
성장하는 개발자가 되고자 합니다.

0개의 댓글