6.6 添加左边栏组件Sidebar.vue

本节需要做手动写更多的代码，要求完成左侧菜单，但不要求点击更新右侧内容，只展示就可以。
html部分：
<template>
    <div id="sidebar" class="hidden-xs col-xs-12 col-sm-3">
        <ul class="linkedList">
            <block v-for="(chapter, i) in chapters" v-bind:key="chapter.id">
                <li v-bind:id="'li_' + chapter.code" class="first"><a href="javascript:void(0)" v-bind:data-code="chapter.code" @click="chapterClick"><span class="chapterSerial">第{{i+1}}章</span>
                <span class="chapterName">{{" "+chapter.name}}</span>
                </a>
                <ul v-if="chapter.subChapters">
                    <block v-for="sub in chapter.subChapters" v-bind:key="sub.id">
                        <li v-bind:id="'li_' + sub.code" class="first"><a href="javascript:void(0)" v-bind:data-code="sub.code" @click="chapterClick"><span class="chapterName">{{sub.chapterTitle}}</span>
                        </a>
                        </li>
                    </block>
                </ul>
                </li>
            </block>
        </ul>
    </div>
</template>
js部分：
import axios from "axios";
export default{
    name:"Sidebar",
    components:{
    },
    data(){
        return{
            chapters:[],
        }
        ;
    },
    created:function(){
    },
    mounted:function(){
        this.getChapters();
    },
    methods:{
        getChapters:function(){
            这里是你要完成的部分
        },
    },
}

getChapters获取章节数据，然后赋值给chapters变量。
getChapters需要用到的请求地址：

style部分：
#sidebar{
    float: left;
    padding: 40px;
    color: #000;
    font-weight: bold;
    background: #dfdee5;
    border-right: 5px solid #95142a;
    margin-right: -5px;
}
#sidebar,#sidebar a {
    color: #000;
    font-weight: bold;
    text-decoration: none;
}
#sidebar h2,#sidebar h3,#sidebar h4 {
    color: #fff;
}
#sidebar ul {
    list-style: none;
    padding-left: 0;
}
#sidebar ul li {
    border-top: dotted 1px #70665f;
    padding-bottom: 0;
    padding-top: 15px;
    padding-left: 15px;
    margin-bottom: 15px;
}
#sidebar ul li:first {
    padding-top: 0;
    border-top: none;
}
#sidebar ul li ul {
    list-style: none;
    margin: 20px;
    display: block;
}
#sidebar ul li ul li {
    border: none;
}
.selected {
    font-weight: bold;
    background: #cc6633;
}
#sidebar,#sidebar a {
    color: #000;
    font-weight: bold;
}
#sidebar a:hover {
    color: orange;
}
progress::-moz-progress-bar {
    background: #55a0ff;
    color: #fff;
}