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

news2024/12/23 2:04:06

文章目录

  • 一.首先创建我们的Vue文件夹
  • 二.源代码
    • BodyDemo
    • HearderDemo
    • HomeDemo
    • MarkdownDemo
    • FileManager.js
    • Main.js(注意绑定)
    • APP源代码
  • 效果图(按钮功能)
  • 新增二级菜单(v-for)
  • 需要的可以私信

一.首先创建我们的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;
        })
    },
    props:["items","topic"],
    data(){
        return{
            currentIndex:0,
            content:""
        }
    },
    components:{
        Markdown:Markdown,
    },
    methods:{
        selectItem(index){
            this.currentIndex=index
        }
    },
    watch:{
        currentIndex:function(val){
            FileManager.getPostContent(this.topic,this.items[val].title).then((res)=>{
                this.content=res.data;
            })
        },
        topic:function(val){
            FileManager.getPostContent(val,this.items[this.currentIndex].title).then((res)=>{
                this.content=res.data;
            })
        }
    }
}
</script>

<style scoped>
.el-menu-item.is-active{
    background-color: #ffffff !important;
}
</style>

HearderDemo

<template>
    <el-container style="margin: 0; padding: 0;">
        <el-header style="margin: 0; padding: 0;">
            <div id="title">Vue学习笔记</div>
        </el-header>
        <el-main style="margin: 0; padding: 0;">
            <el-menu
            mode="horizontal"
            background-color="#e8e7e3"
            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-main>
    </el-container>
</template>

<script>
export default{
    props:["items"],
    methods:{
        selectItem(index){
            this.$emit('selected',index)
        }
    }
}
</script>

<style scoped>
#title{
    color: brown;
    font-size: 40px;
    font-weight: bold;
    font-family: Georgia, 'Times New Roman', Times, serif;
}
#text{
    font-size: 20px;
}
</style>

HomeDemo

<template>
    <el-container id="container">
        <el-header style="width: 100%" height="120px">
            <Header :items="navItems" v-on:selected="changeSelected"></Header>
        </el-header>
        <el-main>
            <Body :items="bodyItems" :topic="navItems[currentTopicIndex].title"></Body>
        </el-main>
        <el-footer>
            <div id="footer">{{ desc }}</div>
        </el-footer>
    </el-container>
</template>

<script>
import Header from './HeaderDemo.vue';
import Body from './BodyDemo.vue';
import FM from '../tools/FileManager.js'

export default{
    components:{
        Header:Header,
        Body:Body,
    },
    data(){
        return{
            navItems:FM.getAllTopic().map((item,ind)=>{
                return{
                    index:ind,
                    title:item
                }
            }),
            desc:"版权所有,仅限学习使用,禁止传播!",
            currentTopicIndex:0,
        };
    },
    methods:{
        changeSelected(index){
            this.currentTopicIndex=index
        }
    },
    computed:{
        bodyItems(){
            return FM.getPosts(this.currentTopicIndex).map((item,ind)=>{
                return{
                    index:ind,
                    title:item
                }
            })
        }
    }
}
</script>

<style scoped>
#container{
    margin-left: 150px;
    margin-right: 150px;
    margin-top: 30px;
    height: 800px;
}
#footer{
    text-align: center;
    background-color: bisque;
    height: 40px;
    line-height: 40px;
    color: #717171;
}
</style>

MarkdownDemo

<template>
    <p v-html="data"></p>
</template>

<script>
import marked from 'marked';

export default{
    props:["content"],
    computed:{
        data(){
            return marked(this.content);
        }
    }
}
</script>


FileManager.js

import axios from 'axios';
const FileManager={
    path:process.env.BASE_URL+"post/", //项目public文件夹下的post文件夹路径
    // 获取所有的主题栏目,后续增加可以继续配置
    getAllTopic:function(){
        return[
            "HTML专题",
            "JavaScript专题",
            "Vue v-for"
        ]
    },
    // 获取 某个主题下的所有文章,后续增加可以继续配置
    getPosts:function(topic){
        switch(topic){
            case 0:
                return["文本标签","HTML基础元素"];
            case 1:
                return["方法与属性","语句与数据类型","about_js"]
            case 2:
                return["v-for"]
        }
    },
    // 获取某个文章的详细内容
    getPostContent:function(topicName,postName){
        let url=this.path+topicName+'/'+postName+'.md';
        return new Promise((res,rej)=>{
            axios.get(url).then((response)=>{
                res(response)
            },rej)
        })
    }
}

export default FileManager

Main.js(注意绑定)

import { createApp } from 'vue'
import VueAxios from 'vue-axios'
import axios from 'axios'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
import App from './App.vue'


const app = createApp(App)
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
    app.component(key, component)
  }
app.use(VueAxios,axios)
app.use(ElementPlus)
app.mount('#app')



APP源代码

<template>
    <Home></Home>
</template>

<script>
import Home from "./components/HomeDemo.vue";

export default{
    name:"App",
    components:{
        Home:Home,
    },
}
</script>

效果图(按钮功能)

在这里插入图片描述

新增二级菜单(v-for)

在这里插入图片描述

需要的可以私信

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/571117.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

办公技巧:学会这 7 种 PPT 制作技巧,让 PPT 制作效率飙升

F4 键&#xff1a;重复上一步操作 例如需要你在一分钟内完成 8 个形状的排版&#xff0c;你会怎么做&#xff1f; 如果是最基础的方式&#xff0c;可能得画出一个之后&#xff0c;慢慢的按住 Ctrl 复制新的出来&#xff0c;但这样实在是太慢了&#xff01;&#xff08;你是这样…

游戏安全运营前置化,10项安全测试预见外挂风险

自今年起&#xff0c;游戏版号已恢复常态化发放。据统计&#xff0c;截至目前年内累计发放460款游戏版号&#xff0c;每月的发放数量均超80款。多款热门新游已上线&#xff0c;大量游戏也已进入测试阶段&#xff0c;蓄势待发&#xff0c;游戏行业持续回暖。 在游戏行业动态回暖…

【历史上的今天】5 月 26 日:美国首个计算机软件程序专利;苹果市值首次超越微软;Wiki 的发明者出生

整理 | 王启隆 透过「历史上的今天」&#xff0c;从过去看未来&#xff0c;从现在亦可以改变未来。 今天是 2023 年 5 月 26 日&#xff0c;在 1995 年的今天&#xff0c;微软公司首席执行官比尔盖茨发表了一番讲话&#xff0c;他认为自己的公司在估计互联网的影响和普及方面错…

opencv实践-图像去畸变

目录 1.背景2.镜头成像畸变原因3.去畸变方法4. opencv去畸变函数5.代码实现 1.背景 由于相机的镜头并不完全理想&#xff0c;成像时会产生线条扭曲、失真等。对双目图像、鸟瞰图等进行处理时&#xff0c;首先要矫正去畸变。 2.镜头成像畸变原因 相机的镜头前有一块透镜&…

python+vue垃圾分类论坛的设计与实现85l30

环境保护是一项利国利民的重大民生工程,是造福子孙后代的幸福事,基于全面分析我国大学生环境保护教育现状的基础上提出了高校可通过开设环境类通识任选课、专业课中融入环境保护教育、环境保护实践教学、环境保护第二课堂等有效途径加强对非环境类专业大学生环境保护教育。 本系…

拥挤聚集智能监测算法

拥挤聚集智能监测算法可以通过yolov7网络模型深度学习框架对人员数量、密度等进行实时监测&#xff0c;拥挤聚集智能监算法识别出拥挤聚集的情况&#xff0c;并及时发出预警。YOLOv7 的发展方向与当前主流的实时目标检测器不同&#xff0c;它能够同时支持移动 GPU 和从边缘到云…

开源日志监控采集平台ELKF

---------------------- FilebeatELK 部署 ---------------------- Node1节点&#xff08;2C/4G&#xff09;&#xff1a;node1/192.168.179.20 Elasticsearch Node2节点&#xff08;2C/4G&#xff09;&#xff1a;node2/192.168.179.23 …

All in ECP,转转一站式ES数据清洗解决方案

1. 业务背景 转转作为国内头部的循环经济产业公司&#xff0c;目前业务架构是中台模式。中台负责提供通用的交易能力&#xff0c;灵活快速响应业务需求&#xff0c;业务方负责前台探索创新&#xff0c;为用户提供有价值的服务。 转转交易中台目前分为基础服务、订单、促销、天路…

《深度思维》跨越式*

参考&#xff1a; https://www.zhihu.com/tardis/zm/art/410244111?source_id1005 从思维的技术到思维的格局&#xff0c;再到专注努力与漫长人生中坚忍的精神图腾&#xff0c;作者通过方法理论与案例相结合&#xff0c;介绍了深度思思维的学习方法。 深度思维简介 拥有较长的…

手机一开,说办就办!指尖上的“数字江西”

数字江西科技有限公司&#xff08;下简称“数字江西”&#xff09;是经省委省政府同意&#xff0c;由江西省信息中心&#xff08;大数据中心&#xff09;管理的国有控股合资公司&#xff0c;于2020年3月2日成立&#xff0c;是江西省人民政府的重要实践&#xff0c;也是江西省委…

opencv_c++学习(二十三)

一、点拟合操作 拟合含义如上图&#xff0c;即为通过已知点去拟合一条直线或者一个多边形。 直线拟合函数&#xff1a; fitLine(lnputArray points, OutputArray line, int distType, double param, double reps, double aeps)points:输入待拟合直线的2D或者3D点集。 line:输…

【2023 · CANN训练营第一季】MindSpore模型快速调优攻略 第二章——MindSpore调试调优

1.生态迁移 生态迁移工具使用示例 生态迁移工具技术方案 不同框架间模型定义前端表达差别巨大(相同算子的API技术难点 、 算子功能、模型构建方式差别较大)&#xff1b; 对于同一框架&#xff0c;不管前端表达差异如何&#xff0c;最终对应的计算 图是相似的。因此提出&#x…

node.js+vue房屋租赁管理系统z0g8w

本系统主要包括以下功能模块&#xff1a;租户、出租人、房源信息、预约看房、合同信息等模块。 其中设计的主要功能如下&#xff1a; &#xff08;1&#xff09;用户的注册和登录本系统&#xff0c;登录到系统的首页。 &#xff08;2&#xff09;用户可以发布自己的房源信息…

快速了解iptables

初识 iptables是什么&#xff1f; iptables是一个在Linux操作系统上使用的防火墙工具&#xff0c;它可以用于配置和管理网络数据包的过滤、转发和修改等操作。 过滤数据包&#xff1a;iptables可以根据不同的规则过滤网络数据包&#xff0c;例如根据源IP地址、目标IP地址、端…

如何在华为OD机试中获得满分?Java实现【不含101的数】一文详解!

✅创作者&#xff1a;陈书予 &#x1f389;个人主页&#xff1a;陈书予的个人主页 &#x1f341;陈书予的个人社区&#xff0c;欢迎你的加入: 陈书予的社区 &#x1f31f;专栏地址: Java华为OD机试真题&#xff08;2022&2023) 文章目录 1. 题目描述2. 输入描述3. 输出描述…

开源开放 生态共建 | openKylin社区单位会员突破200家!

当前&#xff0c;开放、协作、共享的开源模式已成为全球软件技术和产业创新的主导&#xff0c;也为信息技术国产自主化提供了强大助力。openKylin作为中国桌面操作系统开源社区&#xff0c;以聚焦桌面操作系统根技术为核心、以孵化相关领域关键项目为目标、以布道开源文化为抓手…

堪称「史上最详细」的整车信息安全强标将发布!释放了哪些信号?

确保汽车整车信息安全&#xff0c;或成为车企们继智能化竞争的下一个竞争焦点。 可以说&#xff0c;在智能化、网联化的驱动下&#xff0c;智能汽车成为了数据收集、数据传输、数据处理的关键节点&#xff0c;消费者在享受汽车智能化带来便利的同时&#xff0c;也逐渐重视智能…

【操作系统复习】第8章 文件管理

数据项、记录和文件 数据项 ➢ 基本数据项&#xff1a;描述一个对象的某种属性&#xff0c;又称字段 ➢ 组合数据项&#xff1a;由若干个基本数据项组成记录 ➢ 记录是一组相关数据项的集合&#xff0c;用于描述一个对象在某方面的属性。 ➢ 关键字&#xff1a;唯一能…

04_GC垃圾回收

面试题&#xff1a; JVM内存模型以及分区&#xff0c;需要详细到每个区放什么 堆里面的分区&#xff1a;Eden&#xff0c;survival from to&#xff0c;老年代&#xff0c;各自的特点。 GC的三种收集方法&#xff1a;标记清除、标记整理、复制算法的原理与特点&#xff0c;分…

python+vue高校网上跳蚤二手市场的设计与实现

商品信息是卖家供应用户必不可少的一个部分。在跳蚤市场发展的整个过程中&#xff0c;商品担负着最重要的角色。为满足如今日益复杂的管理需求&#xff0c;各类管理系统程序也在不断改进。本课题所设计的普通高校网上跳蚤市场&#xff0c;使用Django框架&#xff0c;Python语言…