[Vue.js] Vue 데이터바인딩하기

💡 실습 포인트!

💜 Vue 의 데이터바인딩 문법 알아보기

document.getElementById('태그_혹은_클래스_혹은_아이디').innerHTML = 데이터;

• JavaScript 에서 변수나 데이터를 HTML 에 데이터바인딩하기 위해서는 위와 같이 길게 한줄을 써야 가능했다.
• 반면 Vue 에서 데이터바인딩을 하기 위해서는 다음과 같이 진행하면 된다.
  • 파일 내 특정 위치에 데이터를 보관한다.
  • 보관한 데이터를 {{ 데이터 }} 와 같은 문법으로 HTML 중간에 내용으로 넣어준다.

🤍 HTML 작성하기

<template>
  <div>
    <h4>OO 원룸</h4>
    <p>OO만원</p>
  </div>
  <div>
    <h4>OO 원룸</h4>
    <p>OO만원</p>
  </div>
  <div>
    <h4>OO 원룸</h4>
    <p>OO만원</p>
  </div>
</template>

• 모든 HTML 코드는 위와 같이 <template></template> 에 작성해주면 된다.
• 이외에 JavaScript 기능은 <script></script> 에 작성하고, style 은 <style></style> 에 작성하면 된다.

---

🤍 데이터 보관하기

<script>
export default {
	name: "App",
	data(){
		return {
			price1 : 55,
			price2 : 43,
			price3 : 38,
		}
	},
	components: {},
};
</script>

• 데이터는 <script></script> 사이에 data(){ return { } } 을 추가한 후 object 형식으로 저장하면 된다.
• 이를 Vue 의 data 보관함, 변수 보관함이라고 생각하면 되며, 중요한 데이터는 object 형식에 맞춰서 모두 여기에 보관한다.

---

🤍 보관한 데이터를 HTML 에 삽입하기

<p>{{ price1 }}만원</p>

• 위의 코드와 같이 보관한 데이터는 HTML 에 내용으로 삽입할 때 중괄호 두 개 안에 데이터를 입력하면 데이터에 저장된 값이 입력된다.
• 저장하고 나면 이제 브라우저에서 확인하면 55만원이라고 잘 뜨는 것을 확인할 수 있다.

---

📌 데이터바인딩을 하는 이유 알아보기

• 자주 변동되는 데이터는 하드코딩을 해놓는 것보다 데이터로 저장해놓는 것이 나중에 JavaScript 로 조작하여 수정하기 훨씬 편하기 때문이다.
• Vue 에는 data 가 변경되면 data 와 관련된 HTML 에 변경된 사항이 실시간으로 반영이 되는 실시간 렌더링 기능이 있는데, 이 기능을 사용하기 위해서는 데이터바인딩을 해야 한다.

---

💜 HTML 속성 데이터바인딩하기

• Vue 는 특이하게도 html 속성도 데이터바인딩이 가능하다.
• 즉, style="", id="", class="" 이런 부분에도 data 보관함에 저장된 데이터를 삽입할 수 있다는 것이다.

<p style="color: red">55만원</p>

• 일반적으로 html 태그에 인라인 방식으로 스타일을 입히는 style="color: red" 와 같은 코드로 작성하는 것이다.

<script>
export default {
	name: "App",
	data(){
		return {
			blue : 'color : blue',
		}
	}
};
</script>

<h4 :style="blue">둔산동 원룸</h4>

• 하지만 data 보관함에 blue : 'color : blue' 와 같이 key-value 와 같은 object 형식으로 넣어준 후, 해당 데이터를 사용할 태그에 key 값을 넣어주면 value 가 입력된다.
• 이 때 주의할 점은 태그의 속성명(여기서는 style) 앞에 콜론( : ) 을 붙여야 한다는 것이다.

• 이제 저장하면 브라우저에서 위와 같이 HTML 내용에 style 이 입혀진 것을 확인할 수 있다.