DataBinding

DataBinding

데이터 바인딩은 JavaScript에서의 데이터를 Html에 넣어서 데이터를 보여줄 수 있도록 만들어준다.

자세한건 CS의 DataBinding

Vue에서 이걸 쓰는 이유는 무엇일까?

1. HTML에서는 값의 변형이 힘들다.
2. 실시간 렌더링 기능을 쓰고싶다.

여기서 실시간 렌더링은 무엇인가?
html은 기본적으로 정적파일이다. 각종 값들이 바뀌지 않는다는 것이다. 하지만 Vue에서는 react에서처럼 값이 바뀔때 마다 재렌더링을 해줘서 변형된 값을 html에 반영시켜준다. 이 기능으로 웹 어플리케이션이 만들어진다.

사용법

1. script태그에 export default에 data() { return {} }을 추가한다.

<script>
export default {
  ... ,
  data() {
    return {
      prices: {
        1: 70,
        2: 60,
      },
      logo: "원룸샵",
      스타일: "color:blue",
    };
  },
  ...
};
</script>

2. template태그에 저장된 변수값을 불러와서 사용한다. [ {{ key }}로 불러온다. ]

<template>
  ...
  <div>
    {{ logo }}
    <h4>XX 원룸</h4>
    <p>{{ prices[1] }}</p>
  </div>
  ...
</template>

3. style도 저장해서 쓸수 있으며, 스타일을 불러올 때는 속성앞에 :(콜론)을 붙인다.

UseCase

<template>
  <img alt="Vue logo" src="./assets/logo.png" />
  <div>
    {{ logo }}
    <h4>XX 원룸</h4>
    <p>{{ prices[1] }}</p>
  </div>
  <div :style="스타일">
    <h4>XX 원룸</h4>
    <p>{{ prices[2] }}</p>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      prices: {
        1: 70,
        2: 60,
      },
      logo: "원룸샵",
      스타일: "color:blue",
    };
  },
  components: {},
};
</script>

공부 진행
[출처] https://www.youtube.com/watch?v=0BbF7UxKKvg