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를 설정하고 사용하는 방법을 알아보았습니다.