[Vue.js] Vue 3 기초 문법 데이터 바인딩 (Data Binding)

[Vue.js] Vue 3 기초 문법 데이터 바인딩 (Data Binding)

 

Vue에서 데이터 바인딩 하는 방법에 대해서 알아보겠습니다.

 

아래는 xxx.vue 라는 파일에서 데이터 바인딩을 하는 코드를 나타냅니다.

 

// App.vue
<template>
	<div>
    	<h1>{{text}}</h1>
    </div>
</template>

<script>
// vue는 실시간 자동 랜더링됨
export default {
  name: 'App',
  /* 데이터 보관함
    date() { // 데이터는 object 자료로 저장한다.
      return {
        text : 'Hello World'
      }
    },
  */
  data: () => ({
    text : 'Hello World'
  }),
}
</script>

data() { return { name : value } } 로 표현을 해도 되고

data : () => ( { name : value } ) 로 표현해도 됩니다.

 

name에 세팅한 value값을 html 코드상에서 사용하려고 하는 위치에 {{ }} 콧수염 괄호에 세팅한 data의 name 값을 넣어주면, name에 세팅된 value가 출력됩니다.

 

 

Vue 데이터 바인딩은 style에도 적용할 수 있습니다.

태그의 속성으로 사용될 때에는 콜론(:)속성명을 사용하고 내부의 이름에는 콧수염 괄호{{ }}를 사용하지 않고 data에 세팅한 name 값을 바로 넣어줍니다.

 

 

 

Array 데이터 타입도 사용할 수 있습니다.

 

먼저 javascript Array를 생성합니다.

원래 사용하던 데이터 바인딩 방식인 콧수염 괄호를 사용하고,

해당 변수명에 Array의 인덱스를 넣어서 불러낼 수 있습니다.

위 코드를 결과로 보면 다음과 같습니다.

---

이번 글에서는 Vue 3에서 데이터 바인딩하는 방법에 대해서 알아보았습니다.

도움이 되셨다면 광고 꾹! 감사합니다!^^