[뷰JS] 축구 메인 Home.vue Layout.vue #40

 

 

설명에 관한 출처는 모두 아래와 연결됩니다.

https://kr.vuejs.org/v2/guide/list.html

리스트 렌더링 — Vue.js

 

v-for 디렉티브 사용법은 다음과 같습니다. 

 

 

ES6 에서 반드시 알아야 할 10대 문법은 아래 블로그를 참조합니다.

참조블로그에서 of 문법을 익힌 후 in 구문보다는 of 구문을 사용하는 것을 강력하게 추천합니다.

 

https://blog.asamaru.net/2017/08/14/top-10-es6-features/

개발자가 필히 알아야 할 ES6 10가지 기능

 

 

특히 핵심영역인 v-for of 구문에서

1번을 생략하면 화면이 추출되지 않습니다.

2번을 생략하면 아래와 같은 에러가 발생합니다.

그래서 초반 버전에서는 생략이 불가했으나 이제는 완전히 생략하면 자동으로 바인딩되는 방식을 허용합니다.

그래서 아래와 같은 모습으로 됩니다. 위에서 표시한 1번과 2번이 모두 생략된 형태입니다.

 

 

Layout.vue

<template>
    <div id="wrapper">
        <header>
            <slot name="header"
                  :title="data1"
                  :login="data2"
                  :join="data3"></slot>
        </header>
        <aside id="sidebar">
            <slot name="sidebar"></slot>
        </aside>
        <section id="content">
            <slot name="content" :content="data4"></slot>
        </section>
        <footer>
            <slot name="footer" :footer="data5"></slot>
        </footer>
    </div>
</template>
 
<script>
export default {
    name: "Layout",
    data: ()=>{
        return {
            data1 : '축구정보 시스템',
            data2 : '로그인',
            data3 : '회원가입',
            data4 : '축구 경기 일정 검색',
            data5 : '(사)축구선수협회'
        }
    }
}
</script>
 
<style scoped>
    /* 전체 구조 */
    #wrapper {
        padding: 5px;
        width: 960px;
        margin: 20px auto;
    }
    header {
        height: 100px;
        padding: 0 15px;
    }
    #content {
        width: 696px;
        float: left;
        padding: 5px 15px;
        min-height: 300px;
    }
    #sidebar {
        width: 200px;
        padding: 5px 15px;
        float: left;
    }
    footer {
        clear: both;
        padding: 0 15px;
    }
    /* 가로폭 980보다 작을 때 사용할 @media query */
    @media screen and (max-width: 980px) {
        #pagewrap {
            width: 94%;
        }
        #content {
            clear: both;
            padding: 1% 4%;
            width: auto;
            float: none;
        }
        #sidebar {
            clear: both;
            padding: 1% 4%;
            width: auto;
            float: none;
        }
        header, footer {
            padding: 1% 4%;
        }
    }
    /* 공통 */
    #content {
        background: #f8f8f8;
    }
    #sidebar {
        background: #f0efef;
    }
    header, #content, #middle, #sidebar {
        margin-bottom: 5px;
    }
    #pagewrap, header, #content, #middle, #sidebar, footer {
        border: solid 1px #ccc;
    }
 
</style>

Home.vue

<template>
    <div id="app">
        <Layout>
            <template #header="self">
                <h1 id="title">{{self.title}}</h1>
                <span id="join">{{self.join}}</span>
                <span id="login">{{self.login}}</span>
            </template>
            <template #sidebar="self" >
                {{self.menu}}
                <ul class="menu">
                    <li v-for="i of sidebars" :key="i.menu">
                        {{i.menu}}
                    </li>
                </ul>
            </template>
            <template #content="self" >
                {{self.content}}
            </template>
            <template #footer="self" >
                <h3 id="footer">{{self.footer}}</h3>
            </template>
        </Layout>
    </div>
</template>
 
<script>
import Layout from "@/components/common/Layout.vue"
export default {
    name: "Home",
    components : {Layout},
    data : ()=>{
        return {
            sidebars: [
                {menu: '쓰기'},
                {menu: '목록'},
                {menu: '검색'},
                {menu: '수정'},
                {menu: '삭제'}
            ]
 
        }
    }
}
</script>
<style scoped>
    ul.menu{
        position: relative;
        padding: 5px;
        list-style: none;
        font-style: italic;
    }
    #title{width: 300px;margin: 0 auto}
    #login{margin-right: 50px; float: right}
    #join{margin-right: 50px; float: right}
    #footer{width: 300px; margin: 0 auto}
</style>