用Vue简单开发一个学习界面

疯掉就疯掉吧

已于 2023-09-13 11:21:23 修改

阅读量4.1k

点赞数 4

分类专栏： web前端开发文章标签： vue.js 学习 javascript

于 2023-05-26 11:48:49 首次发布

本文链接：https://blog.csdn.net/qq_62512326/article/details/130883680

版权

本文介绍了如何使用Vue.js来创建一个学习界面，包括创建Vue文件夹，划分BodyDemo、HeaderDemo、HomeDemo和MarkdownDemo等组件，以及使用FileManager.js和Main.js进行功能绑定。通过v-for指令实现二级菜单的动态生成，展示了最终的效果图。

摘要由CSDN通过智能技术生成

一.首先创建我们的Vue文件夹

我们分为三个专题，并且创建4个vue文件，还有以下js
在这里插入图片描述

二.源代码

BodyDemo

<template>
    <el-container style="height: 100%;">
        <!-- 左边的垂直导航(二级菜单) -->
        <el-aside width="200px" style="background-color: #f1f1f1;">
            <div></div>
            <el-menu
            mode="vertical"
            background-color="#f1f1f1"
            text-color="#777777"
            active-text-color="#000000"
            :default-active="0"
            @select="selectItem"
            >
                <el-menu-item
                v-for="item in items"
                :index="item.index"
                :key="item.index"
                >
                    <div id="text">{
  { item.title }}</div>
                </el-menu-item>
            </el-menu>
        </el-aside>
        <!-- 通过解析markdown文件后，渲染的地方 -->
        <el-main>
            <Markdown :content="content"></Markdown>
        </el-main>
    </el-container>
</template>

<script>
import Markdown from './MarkdownDemo.vue';
import FileManager from '../tools/FileManager.js'

export default{
     
    mounted(){
     
        FileManager.getPostContent(this.topic,this.items[this.currentIndex].title).then((res)=>{
     
            this.content=res.data;