[Vue] Class Component

Class Component

• @Component decorator 사용하면 클래스 컴포넌트 사용 가능

import Vue from 'vue'
import Component from 'vue-class-component'

@Component
export default class ExampleClass extends Vue { }

 

• data는 클래스의 property로 선언 가능

import Vue from 'vue'
import Component from 'vue-class-component'
@Component
export default class ExampleClass extends Vue {
    private exampleData: string = 'example';
}

 

• method는 클래스의 function으로 선언 가능

@Component
export default class ExampleClass extends Vue {
    private exampleMethod(): string {
        return 'Example Method';
    }
}

 

• Computed property는 클래스의 getter/setter로 선언 가능

@Component
export default class ExampleClass extends Vue {
    private name: string = "Example";

    get name() {
        return this.name;
    }

    set name(name: string) {
        this.name = name;
    }
}