Vue 컴포넌트 개념이해 2 - 데이터 바인딩

데이터 바인딩이란?

Angular와 마찬가지로 양방향 데이터 바인딩을 지원합니다. (React는 단방향 데이터 바인딩 지원)

 

※ 양방향 데이터 바인딩이란?
모델에서 데이터를 정의한 후 뷰와 연결하면 어느 한쪽에 변경이 일어났을 때
다른 한쪽에 자동으로 변경사항이 반영되는 것

 

데이터 바인딩 예제

1. vue-project\src 폴더에 DataBinding.vue 파일을 생성한 후 다음 코드 작성

<template>

    <h1>Hello, {{title}}!</h1>

</template>

<script>

    export default {

        data() {

            return {

                title : 'world'

            };

       

        }

    }

</script>

2. vue-project\src\router 폴더에 index.js 파일을 열어 코드 추가(이때, 기존 코드는 삭제하지 않는다. )

import DataBinding from '../views/DataBinding.vue'

const routes = [

 

  {

    path: '/databinding',

    name: 'DataBinding',

    component:DataBinding

  }

]

 

const router = createRouter({

  history: createWebHistory(process.env.BASE_URL),

  routes

})

export default router

 

3. vue-project\src의 app.vue 파일을 열어 다음과 같이 수정한다.

 

<template>

  <nav>

    <router-link to="/">Home</router-link> |

    <router-link to="/about">About</router-link> |

    <router-link to="/databinding">databinding</router-link> |

  </nav>

  <router-view/>

</template>

 

 

4. 터미널을 열어 cd vue-project, npm run serve를 입력한다.

 

5. 아래 창이 뜨면 성공이다.