data

Vue data

https://v3.ko.vuejs.org/api/options-data.htmlv3.ko.vuejs.org

공식 문서

Vue 제어 영역에 표시하기 위한 백그라운드 데이터를 Vue application 내부에 생성할 수 있다. 생성할 때 다음과 같이 data라는 이름의 함수를 Vue instance 내부에 정의하여 객체를 반환하도록 설정한다.

const app = Vue.createApp({ 
    data(){
        return {
            text : "Welcome to Vue JS 3!"
        };
    }
});
app.mount("#app");

const app = Vue.createApp({
    data:function(){
        return {
            text : "Welcome to Vue JS 3!"
        };
    }
});
app.mount("#app");

const app = Vue.createApp({
    data:()=>{
        return {
            text : "Welcome to Vue JS 3!"
        };
    }
});
app.mount("#app");

첫 번째 방법과 두 번째 방법은 완벽하게 동일한 방법이며 생성 결과 역시 같다. 세 번째 방법은 ES6의 arrow function을 이용하는 방법으로 this의 사용 방법이 달라지는 특징이 존재하므로 권장하지 않는다.

또한 다음 형태는 과거(2.x)에 사용했지만 권장하지 않는 형태이다.

const app = Vue.createApp({
    data:{
        text : "Welcome to Vue JS 3!"
    }
});
app.mount("#app");

Vue.jsvuejs

data 활용

선언한 데이터는 다음 구문들을 사용하여 다양하게 활용할 수 있다.

• v-model

• directive

• template

• computed

• watch

• methods