2. 데이터바인딩

https://youtu.be/0BbF7UxKKvg

 

 

데이터바인딩은 데이터를 자바 오브젝트 형식으로 저장해두었다가 HTML template에 갖다 쓰는 것이다.

 

오브젝트 안의 변수에 할당된 값이 변하면 자동으로 렌더링을 다시 해준다.

 

(마치 react에서 state 변경을 감지해서 렌더링해주는 것이랑 같은 느낌이다.)

 

*요지는 자주 변하는 값들을 데이터바인딩 해두어야 한다는 것이다.

 

HTML 태그 사이에 값을 넣는 경우에는 {{ }} 형식으로 넣어주면 된다.

 

태그의 속성 또한 데이터바인딩이 가능한데 :속성="데이터이름" 형식으로 넣어주면 된다.

 

<template>
  <img alt="Vue logo" src="./assets/logo.png" />
  <div>
    원룸샵
    <h4 :style="스타일">XX 원룸</h4>
    <p>{{ price1 }} 만원</p>
  </div>
  <div>
    <h4>XX 원룸</h4>
    <p>{{ price2 }} 만원</p>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      price1: 60,
      price2: 80,
      스타일: "color : blue",
    };
  },
  components: {},
};
</script>

이런식으로 작성하면 아래쪽의 스타일 때문에 위의 h4에 파란색이 적용되고 price1에 60이 들어가게 된다.

아래쪽의 데이터안의 값이 바뀌면 자동으로 렌더링해준다.

 

<template>
  <img alt="Vue logo" src="./assets/logo.png" />
  <div>
    <h4>{{ products[0] }}</h4>
    <p>{{ price[0] }} 만원</p>
  </div>
  <div>
    <h4>{{ products[1] }}</h4>
    <p>{{ price[1] }} 만원</p>
  </div>
  <div>
    <h4>{{ products[2] }}</h4>
    <p>{{ price[2] }} 만원</p>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      products: ["역삼동원룸", "천호동원룸", "마포구원룸"],
      price: [50, 100, 150],
    };
  },
  components: {},
};
</script>

<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>

이런식으로 배열에 값을 여러개 넣고 꺼내 쓸 수도 있다.

 

이런 화면이 나온다.

반복문을 쓰면 더 간단히 표현이 가능하겠다.