Vue의 data 객체

컴포넌트의 기초는 우리가 조작할 데이터입니다. 이 데이터는 특별한 객체 data에 저장됩니다. 이 객체는 특별한 메서드의 결과로 반환되어야 합니다:

App.vueexport default {
  data() {
    return {
      
    }
  }
}

데이터 객체의 속성에 어떤 텍스트를 저장해 보겠습니다:

App.vuedata() {
  return {
    text1: '111',
    text2: '222',
  }
}

저장된 데이터는 템플릿에 출력할 수 있습니다. 이는 값을 출력하려는 속성의 이름을 작성하는 이중 중괄호 안에서 수행됩니다. 우리 속성들의 값을 출력해 보겠습니다:

App.vue<template>
  {{ text1 }}
  {{ text2 }}
</template>

이제 우리의 각 메시지가 자체 단락에 출력되도록 만들어 보겠습니다:

App.vue<template>
  <p>{{ text1 }}</p>
  <p>{{ text2 }}</p>
</template>

javascriptdata() {
  return {
    name: 'john',
    surn: 'smit',
  }
}