개발 도구 (Development Tools)/Vue

Vue 데이터 바인딩 하는 방법

BiCute 2022. 8. 25. 08:00
반응형

 

1. Vue의 데이터 바인딩

Vue는 양방향 데이터 바인딩(Two-way data binding)을 지원합니다.

(*React는 단방향 데이터 바인딩만 지원)

양방향 데이터 바인딩은 모델과 뷰 중 어느 한쪽이 변경이 일어나면 다른 한쪽에 자동으로 반영되는 것을 의미합니다.

 

 

2. 시작하기 전에...

최근 Vue관련 게시물을 계속해서 순차적으로 작성하고 있습니다.

여기서부터는 이제 블로그를 만들어보며 시리즈물로 작성해볼까 합니다.

 

우선 헤더는 임의의 디자인으로 완성해서 헤더 컴포넌트로 삽입해 놓고 시작합니다.

<template>
  <MainHeader />
</template>

<script>
import MainHeader from './components/MainHeader.vue'

export default {
  name: 'App',
  components: {
    MainHeader
  },
}
</script>

 

헤더만 대충 구현해놓고 시작

컴포넌트 만들고 삽입하는거, 또는 이 코드 봐도 전혀 모르겠다 싶으면 
컴포넌트 만들고 삽입하는 방법을 작성한 지난 글부터 참고하여 시작하도록 합시다.

Vue 새로운 컴포넌트를 생성하고 추가하는 방법 >

 

 

3. 데이터 바인딩을 하는 방법

  우선 데이터를 담는 방법입니다.

  데이터는 data() { return { 담을 내용 }} 형식으로 작성하며, 내용은 중괄호{} 안에 들어가는 것이니 오브젝트 형식으로 작성해주면 됩니다. 

<script>
  export default {
    data(){  // <-- 여기서부터
      return{
        title: "게시물 제목1",  // <-- Data는 object 자료형으로
      }
    },  // <-- 여기까지
  }
  </script>

 

이렇게 데이터가 생성되었다면, HTML에 해당 데이터를 웹에 출력할수 있도록 HTML에 꽂아 넣는 작업(데이터 바인딩)만 해주면 됩니다.

<templete> 내부에 원하는 위치에서 다음과 같이 중괄호 2개 사이에 {{ 데이터 이름 }}  형식으로 작성하면 끝입니다.

 

코드 예)

<template>
  <MainHeader />

  <div class="blogPost">
    {{ title }}  // <-- data() 항목중 title이란 이름의 값을 표시
  </div>

</template>

<script>
import MainHeader from './components/MainHeader.vue'

export default {
  name: 'App',
  components: {
    MainHeader
  },
  data(){
    return{
      title: "게시물 제목1",
    }
  },
}
</script>

 

결과

  게시물 제목1이라는 데이터가 출력됩니다

 

게시물이 여러개라면 매번 다른 이름을 지어줄 순 없으니 데이터 값을 배열 식으로 작성하여 바인딩하는 것도 가능합니다.

title: ["게시물 제목1", "게시물 제목2", "게시물 제목3"],
  <div class="blogPost">
    <p>{{ title[0] }}</p>
    <p>{{ title[1] }}</p>
    <p>{{ title[2] }}</p>
  </div>

 

 

4. 속성값에 데이터 바인딩하는 방법

 

style이나 class같은 속성 값에도 데이터 바인딩을 할 수 있습니다.

이때는 v-bind: 라고 작성한 후 데이터 이름을 지정해 주면 됩니다.

(*속성에 넣을때는 이중 중괄호{{ }}를 사용하지 않습니다)

<template>
  <MainHeader />

  <div v-bind:style="titleStyle" class="blogPost">  // <-- v-bind를 사용하여 데이터바인딩
    <p>{{ title[0] }}</p>
    <p>{{ title[1] }}</p>
    <p>{{ title[2] }}</p>
  </div>

</template>

<script>
import MainHeader from './components/MainHeader.vue'

export default {
  name: 'App',
  components: {
    MainHeader
  },
  data(){
    return{
      title: ["게시물 제목1", "게시물 제목2", "게시물 제목3"],
      titleStyle: "color:red"  // <-- 스타일이 담긴 데이터
    }
  },
}
</script>

 

 

또한 v-bind:는 보통 :로 줄여서 사용합니다. 

위와 같은 경우는 :style="titleStyle"이 되겠네요.

 

※ :class 지시문은 아래와 같이 일반 class 속성과 공존할 수 있습니다.

<div class="static" :class="titleStyle"> 작성할 내용 </div>

 

 

 

반응형