[Vue] 차근차근 Todo List 만들기 with typescript - (0) 클래스 스타일 Vue 컴포넌트

TODO LIST 만들어보기 Vue with Typescript (뷰 + 타입스크립트) (0)

☞ 클래스 스타일 Vue 컴포넌트

Typescript는 JavaScript의 객체 지향적으로 개발할 수 있도록 보완해서 만든 Javascript Superset 언어입니다.

그렇기 때문에 이번 Todo List만들기는 Typescript를 이용할 것이기 때문에 컴포넌트를 선언할 때 클래스 기반 API를 사용해 클래스 스타일(Class Style) 로 구현을 해보겠습니다. (참고: https://kr.vuejs.org/v2/guide/typescript.html)

TypeScript 지원 — Vue.js

 우선 클래스 스타일을 위해 vue-class-component 설치

npm install vue-class-component

 

기본적인 vue ts 틀 (VSCODE를 사용하는 경우 확장 vue Snippets를 설치 후 vbase-ts로 빠르게 생성 가능)

<template>
    <div>

    </div>
</template>

<script lang="ts">
    
</script>

<style scoped>

</style>

 

typescript로 개발할 것이기 때문에 lang="ts"를 반드시 추가

<script lang="ts">

 

Decorator를 사용해 Class 방식을 사용 할 것이기 때문에 'vue-class-component'를 import

import {Vue, Component} from 'vue-class-component'

 

@Component 아래 Class를 생성하면 기본적인 틀 완성

@Component
    export default class Header extends Vue{
        
    }

 

완성된 기본적인 틀

<template>
    <div>

    </div>
</template>

<script lang="ts">
    import {Vue, Component} from 'vue-class-component'

    @Component
    export default class <클래스명> extends Vue{
        
    }
    
</script>

<style scoped>

</style>

☞ 이제부터 더 나아가 vue-property-decorator를 사용해서 개발을 할 것입니다.

vue-property-decorator를 사용하면 클래스 안에서 또한 Decorator(@Prop, @Watch, @Event)를 사용해서 Vue의 기능들을 사용 할 수 있습니다. 

아래 사이트를 참고하시면 좋습니다.

https://github.com/kaorun343/vue-property-decorator

kaorun343/vue-property-decorator

궁금하신점이 있으시면 바로 댓글 달아주세요~