[Vue] 데이터 바인딩

🤔 데이터 바인딩이란?

JavaScript 의 데이터(변수)를 html에 연결해주는 것
vue 에서 HTML 태그와 javaScript 데이터를 자동으로 동기화 할 수 있다.

이걸 데이터 바인딩 이라고 부른다!

 

🤔 그럼 데이터 바인딩은 어떻게 사용할까?

<template>
  <div>
    <p>{{ message }}</p>  <!-- 데이터 바인딩 -->
    <input v-model="message" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: "안녕 Vue!"
    };
  }
}
</script>

 

단방향 데이터 바인딩 <p>{{ message }}</p>

  결과 {{}} 안에 Vue 컴포넌트의 data() 에서 정의한 message 값을 HTML 에 표시하는 방식이다.

  이건 단방향 바인딩으로, data.message 값이 바뀌면 html 도 자동으로 바뀌지만,

   html 을 직접 바꿔도 data 는 바뀌지 않는다.

 

양방향 데이터 바인딩 <input v-model="message" />

   v-model 은 vue 에서 제공하는 양방향 데이터 바인딩 디렉티브로

   input 태그의 값과 message 데이터를 연결하는 것이다.

   

🤔 여기서 양방향이란?

• 사용자가 input 에 hellow 라고 입력을 하면 message 값도 hellow 로 바뀌게 된다.
• 반대로 코드에서 message 안녕 이라고 바꾸면 input 값도 안녕 으로 자동 갱신된다.