{{ 데이터바인딩 }} 하는 이유

{{ 데이터바인딩 }} 언제? 왜? 쓰는지??

 

{{ 데이터바인딩 }} 하는 이유 :

 

1. HTML에 하드코딩해놓으면 나중에 변경 어려움.

 

2. Vue의 실시간 자동 렝더링 기능 사용을 위해.

-> 웹 앱 같은 사이트 만들기 가능.

 

자주 변할거 같은 데이터들은 데이터로 보관(저장)하고,

HTML에 {{ 데이터 }} 꽂아 넣기!

 

* 사이트 이름이나 로고 처럼 바뀔일이 없는 경우에는 데이터 바인딩 불필요

 

* HTML 속성도 데이터바인딩 가능:

:속성 = "데이터이름"

<template> // HTML 코드들은 <template> 안에 집어 넣기
  <img alt="Vue logo" src="./assets/logo.png" />
  <div>
    <h4 :style="스타일">xx 원룸</h4> // HTML 속성도 데이터바이딩 가능.
    <p>{{ price1 }} 만원</p> // {{ 데이터 }} 형식으로 HTML에 데이터 꽂아넣기
  </div>
</template>

<script> // 자바스크립트 기능은 <script>에
export default {
  name: "App",
  data(){  // 데이터보관은 object 형식으로 저장!
    return {
      price1: 80,
      스타일: "color : blue",
    }
  },
  components: {},
};
</script>

<style> // 스타일은 <style>에
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

 

출처: 코딩애플

https://codingapple.com