[Vue] 차근차근 Todo List 만들기 with typescript - (3) Header, Create Component

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

Header Component (Vuex 적용 전)

우선 Header Component는 동적 라우트 기능을 사용해야 하기 때문에 동적 라우트 설정을 따로 해줘야 합니다.

하지만 NuxtJs에서는 _<파일명>.vue 와 같이 파일명 앞에 _ 를 붙여주면 자동으로 동적 라우트 설정을 해줍니다.^^ (NuxtJS의 장점) (참고 : https://ko.nuxtjs.org/guide/routing/)

(※ 동적 라우트를 이용해서 활동 전, 후를 각각 불러오는 기능은 Vuex.store를 만들어 준 이후 구현하겠습니다.)

 

status로 라우팅을 할 것이기 때문에 _status.vue로 pages 폴더에 만들어줍니다.

 

 만들고 난 후 .nuxt/router.js 에서 /:status로 동적 라우트가 생성됨을 확인할 수 있습니다.

자, 동적 라우트는 설정을 완료했고, Header Component를 만들어봅시다.

/components/Header.vue

<template>
    <div>
        <ol class="breadcrumb">
            <li><router-link to="/">모두</router-link></li>
            <li><router-link to="/clear">끝난 활동</router-link></li>
            <li class="active"><router-link to="/yet">진행 중인 활동</router-link></li>
        </ol>
    </div>
</template> 

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

    @Component
    export default class Header extends Vue{
    }
    
</script>

<style scoped>

</style>

☞ vue에서는 <router-link> 태그를 통해 아래와 같이 라우트를 설정할 수 있습니다. 

<ol class="breadcrumb">
            <li><router-link to="/">모두</router-link></li>
            <li><router-link to="/clear">끝난 활동</router-link></li>
            <li class="active"><router-link to="/yet">진행 중인 활동</router-link></li>
</ol>

 

Create Component (Vuex 적용 전) 

가장 간단한, ItemList에 새로운 아이템을 추가해주기 위한 기능을 구현할 Component입니다.

따라서, content의 내용을 넣은 Input과 추가를 위한 +버튼을 생성해주면 됩니다.

 

/components/Create.vue

<template>
    <div>
       <input type="text" class="input">
       <button type="button" class= "btn">+</button>
    </div>
</template> 

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

    @Component
    export default class Create extends Vue{
    }
    
</script>

<style scoped>

</style>

라우터 페이지

pages/_status.vue (동적 라우트를 사용하기 위해 _status.vue를 만들었으니 index.vue를 삭제를 해줘야 합니다!)

<template>
    <div class="full_wrap">
        <Header></Header>
        <Create></Create>
        <List></List>
    </div>
</template>

<script lang="ts">
  import Vue from 'vue'
  import {Component} from 'vue-property-decorator'
  import List from '~/components/List'
  import Header from '~/components/Header'
  import Create from '~/components/Create'

  @Component({
    components: {
        List,
        Header,
        Create
    } 
  })
  export default class Index extends Vue{

  }
</script>

<style scoped>
    .full_wrap{
        padding : 100px;
    }
</style>

결과

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