Vue01 데이터바인딩

vue 실행시키고 싶을 때

npm run serve

##

JS 데이터를 HTML에 꽂아넣는 문법

vue 에서는 document.getElementById().innerHTML 이렇게 길게 코드를 짜지 않고 간단히 데이터를 꽂아 넣을 수 있다.

꽂아 넣고 싶으면 데이터를 어딘가에 저장해야한다. 자바스크립트는 ‘변수’에 저장을 하듯이, vue에는 데이터 보관 통이 있다.

data(){
    return{
	여기에 데이터를 보관함
	}
  }

데이터는 object 자료로 저장해야함 {자료이름(작명해야함): 자료내용}

밑에 있는 데이터를 HTML에 꽂아넣고 싶으면 `` 중괄호 2개 엮어서 쓰고 (vue 문법), 안에 데이터 이름을 넣는다

⭐️이 문법을 언제 쓰는지 배워야 함. 왜 쓰는지. 데이터바인딩 하는 이유⭐️

1. html을 하드코딩해놓으면 나중에 변경이 어려움. 쇼핑몰 상품들은 가격이 매일 변경되니까. 가변적인 데이터는 하드코딩 해 놓는것보다 데이터로 담아서 하는게 옳은 방식
2. Vue의 실시간 자동 렌더링 쓰려면 해야함⭐️ data를 변경하면 data와 관련된 HTML도 실시간으로 변경됨 실시간 자동렌더링이 일어나면 ‘웹앱’ 같은 사이트 만들 수 있음

(충격) HTLM 속성도 데이터바인딩 가능

:속성=“데이터이름” 

문법: 앞에 콜론을 붙이기