0. 데이터 바인딩?

JS 데이터를 HTML에 넣는 문법

🤔이걸 왜 쓸까

• 변경사항을 적용하기 어려운 하드코딩이 싫으니까
  - 가변적인 데이터를 다룰 때 더 유효
• Vue의 실시간 자동 렌더링을 쓰려고 하면 필수
  - Vue에서의 data 변경은 data와 관련된 HTML에도 실시간으로 반영
  - 웹앱을 만들 수 있다
  자주 바꿀 필요가 없으면 굳이 안써도 된다

0.2 데이터 입력

document.getElementsByName().innerHTML = 같은 방식으로 쓰던 기존의 js 스타일의 데이터 바인딩이 vue에서는

data(){
    return {
      데이터 이름 : 값
    }
  }

로 사용된다.

• HTML의 속성도 데이터 바인딩이 가능하다

0.3 데이터 사용

{{넣을 데이터 이름}}으로 가져다 쓸 수 있다

• 데이터바인딩란 내용을 HTML의 속성으로 쓰고 싶은 경우에는

<태크명 :속성="데이터이름">으로 작성

• 속성으로 쓰는 경우 ':'는 필수

---

예시)
<script>
export default {
  name : 'App',
  data(){
    return {
      
    }
  }
}

</script>

---

참고

• 코딩애플