데이터 바인딩

데이터 바인딩

1. 데이터 바인딩(Data Binding)

• Vue.js의 데이터 바인딩에 대해 알아봅시다!
• Vue.js에서 데이터 바인딩은 JS 데이터를 HTML에 넣는 문법을 말합니다.
• 데이터 바인딩을 쓰면, HTML을 코딩하기 쉽고 Vue의 실시간 자동 렌더링을 쓸 수 있습니다.
• #1. 바로 실습해봅시다.  App.js에 들어가서 다음과 같이 입력해 줍니다.

<template>
  <img alt="Vue logo" src="./assets/logo.png">
  <div>
    <h4>XX 원룸</h4>
    <p>XX 만원</p>
  </div>
  <div>
    <h4>XX 원룸</h4>
    <p>XX 만원</p>
  </div>
</template>

<script>

export default {
  name: 'App',
  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>

 

• 전에 보셨다시피 template 태그와 script 태그가 있습니다. 이 섹션들은 무엇을 의미할까요?

 1) 템플릿(Template)

• 템플릿은 사용자에게 보여지는 HTML의 모양과 내용을 정의합니다.
• Vue.js의 템플릿은 HTML과 Vue.js의 특별한 구문을 혼합하여 사용합니다. 이 구문은 브라우저에서 렌더링 되기 전에 Vue.js에 의해 처리됩니다.
• 템플릿 내에서는 Vue.js 데이터와 메소드에 접근할 수 있으며, 보간법(Interpolation), 디렉티브(Directives) 등을 사용하여 동적인 컨텐츠를 생성할 수 있습니다.

 2) 스트립트(Script)

• 스크랩트 섹션은 Vue.js 컴포넌트의 JavaScript 로직을 정의합니다.
• 이 섹션에서는 컴포넌트의 데이터(data), 계산된 속성(computed properties), 메소드(methods) 등을 정의합니다.
• 데이터와 로직을 포함하는 JavaScript 코드를 작성하여, Vue.js의 반응성을 제공하고 컴포넌트의 동작을 제어합니다.
• 또한, 스크립트 섹션에서는 컴포넌트의 라이크사이클 훅(Lifecycle hooks)을 정의하여 컴포넌트가 생성, 업데이트, 소멸될 때 실행될 로직을 설정할 수 있습니다.

 

• #2. 태그들이 무엇인지 알았으면, App.vue에서 script 태그 안에 다음과 같이 입력해 줍니다.

// <template>...</template>
<script>
export default {
  name: "App",
  data() {
    return {
      // 데이터 보관 (데이터는 object 자료형으로 저장)
      price1: 60,
      price2: 70,
    };
  },
  components: {},
};
</script>

 

• #3. 그 다음 template 태그에 다음과 같이 입력한 후, 브라우저로 확인해 봅시다.

<template>
  <img alt="Vue logo" src="./assets/logo.png" />
  <div>
    <h4>AA 원룸</h4>
    <p>{{ price1 }} 만원</p>
  </div>
  <div>
    <h4>BB 원룸</h4>
    <p>{{ price2 }} 만원</p>
  </div>
</template>

// <script>...</script>

 

    → 정상적으로 나오는 것을 확인할 수 있습니다. 값이 변경될 데이터를 보관하고 HTML에 넣어 사용하면 되는 것입니다.

    → 즉, 자주 변경될 데이터를 밑에 저장해 놓았다가, HTML에 넣어 사용하면 됩니다.

 

• style도 데이터 바인딩이 가능합니다. 다음과 같이 입력하여, 사용할 수 있습니다.

:style="스타일명"

 

• #4. template 태그와 script 태그 안에 다음과 같이 추가해 줍니다.

<template>
  <img alt="Vue logo" src="./assets/logo.png" />
  <div>
    원룸샵
    <h4 :style="headStyle">AA 원룸</h4>
    ...
</template>

<script>
export default {
  // name: "App",
  data() {
    return {
      // 데이터 보관 (데이터는 object 자료형으로 저장)
      // ...
      headStyle: 'color: blue',
    };
  },
  // components: {},
};
</script>

 

    → 실행하면, AA 원룸이 파랑색으로 나오는 것을 확인할 수 있습니다.

    ※ id나 class도 데이터 바인딩이 가능합니다.

 

• #5. 배열을 이용하여 다음과 같이 원룸명을 지정할 수 있습니다.

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

<script>
export default {
  name: "App",
  data() {
    return {
      // 데이터 보관 (데이터는 object 자료형으로 저장)
      products: ["역삼동원룸", "천호동원룸", "마포구원룸"],
    };
  },
  components: {},
};
</script>

// <style>...</style>

 

3. 정리하며

• 지금까지 Vue.js의 데이터 바인딩에 대해 알아보았습니다.
• 다음 시간엔 v-for 반복문에 대해 알아보겠습니다.

v-for 반복문

 

※ 코딩애플님의 강의를 참고하였습니다.

 

※ Git 주소

데이터 바인딩 · NewBean0312/vue-study-2024-03@22bc401