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