웹개발 및 최신 테크 소식을 전하는 블로그, 웹이즈프리

HOME > vuejs

vuejs에서 컴포넌트에 사용할 data 설정하는 방법

Last Modified : 2018-10-02 / Created : 2018-10-02
3,147
View Count
VueJS의 component에서 data를 설정, 사용하는 방법입니다.




# VueJS에서 data를 설정하고 사용하는 방법

만약 특정한 컴포넌트를 선언하고 내부에 data를 선언하는 경우 다음과 사용합니다.
<script>
  export default {
    data: function() {
      return {
        sitename: 'webisfree',
        siteurl: 'webisfree.com'
      }
    }
  }
</script>

위 코드를 보면 컴포넌트를 선언하는 script 내부에 data 프로퍼티를 사용합니다. 내부에는 function() {}을 사용하여 data를 가진 객체를 반환하면 됩니다. 아래에 해당하는 부분입니다.
data: function() {
  return {
    sitename: 'webisfree',
      siteurl: 'webisfree.com'
    }
  }
}

이후 다음과 같이 template이나 스크립트로 불러올 수 있을 것입니다.
<template>
  <div>
    <span>{{ sitename }}</span>
  </div>
</template>

스크립트의 경우 아래처럼 사용할 수 있을 것입니다. 만약 method인 경우...
<script>
  export default {
    ...
    methods: {
      showSitename: function() {
        alert(this.sitename);
      }
    }

  }
</script>


여기까지 간단하게 VueJS에서 컴포넌트에서 data를 설정하고 사용하는 방법을 알아보았습니다.

Previous

요즘 뜨는 VueJS 알아보기

Previous

[vuejs] v-if로 요소 보이거나 숨기는 방법