当前位置：首页 > news >正文

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

news 2026/3/31 20:19:17

文章目录

一.首先创建我们的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-menumode="vertical"background-color="#f1f1f1"text-color="#777777"active-text-color="#000000":default-active="0"@select="selectItem"><el-menu-itemv-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-menumode="horizontal"background-color="#e8e7e3"text-color="#777777"active-text-color="#000000":default-active="0"@select="selectItem"><el-menu-itemv-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）

在这里插入图片描述

需要的可以私信

在这里插入图片描述

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

文章目录一.首先创建我们的Vue文件夹二.源代码BodyDemoHearderDemoHomeDemoMarkdownDemoFileManager.jsMain.js（注意绑定）APP源代码效果图（按钮功能）新增二级菜单（v-for）需要的可以私信一.首先创建我们的…...

编程日记 2023/6/2 21:15:50

Oracle数据库从入门到精通系列之五：数据文件

Oracle数据库从入门到精通系列之五：数据文件一、数据文件二、Oracle数据库存储分配单位三、Oracle数据库文件系统机制四、段五、区段六、块七、表空间八、Oracle数据库存储层次体系小结一、数据文件数据文件和重做文件是数据库中最重要的文件，数据最终会存储在这些文件中。…...

编程日记 2023/6/2 21:10:48

使用MockJS进行前端开发中的数据模拟

在前端开发中，有时我们需要在没有后端接口的情况下进行前端页面的开发和测试。这时，我们可以使用MockJS来模拟数据，以便进行开发和调试。MockJS是一个用于生成随机数据和拦截Ajax请求的JavaScript库，它能够帮助我们快速搭建起一个…...

编程日记 2023/6/2 21:05:46

Ex-ChatGPT本地部署+Azure OpenAI接口配置+docker部署服务

Ex-ChatGPT项目分为 Ex-ChatGPT 和 WebChatGPTEnhance 两部分，Ex-ChatGPT启动后是个web服务，通过访问ip端口体验； WebChatGPTEnhance可编译生成一个浏览器插件，Chrome或者Microsoft edge浏览器可以安装该插件，点击该插…...

编程日记 2023/6/2 21:00:46

【收藏】FP独立站建站安心收款经验分享

前几天有个客户咨询我，跟我说了他的疑问。他是在阿里巴巴国际站上面做鞋服，但看到同行在独立站上铺fp，所以他想问问：怎么建立一个独立站并在上面成功推出fp呢？今天，我就来跟有类似诉求的朋友们分享一下&…...

编程日记 2023/6/2 20:55:45

python：绘制GAM非线性回归散点图和拟合曲线

作者：CSDN _养乐多_ 本文将介绍使用python语言绘制广义线性模型（Generalized Additive Model，GAM）非线性回归散点图和拟合曲线。并记录了计算RMSE、ubRMSE、R2、Bias的代码。文章目录一、GAM非线性回归详解二、代码三、计算RM…...

编程日记 2023/6/2 20:50:43

每日算法（第十四期）

儿童节了也要好好学习鸭。先来回顾一下上期的问题及答案： 「反转链表」（Reverse Linked List）。题目描述： 反转一个单链表。以下是对应的JavaScript实现： function reverseList(head) {let prev null;let curr he…...

编程日记 2023/6/2 20:45:41

uboot的使用

目录串口调试 1.uboot模式自启动模式： 交互模式 2.uboot帮助命令 3.uboot环境变量 4.uboot常用环境变量 5.uboot网络传输命令 6.uboot存储器访问命令 7.uboot自启动环境变量串口调试 1.串口连接开发板，通过 "设备管理器" 获取对…...

编程日记 2023/6/2 20:40:40

学习HCIP的day.09

目录一、BGP：边界网关路由协议二、BGP特点： 三、BGP数据包四、BGP的工作过程五、名词注解六、BGP的路由黑洞七、BGP的防环机制—水平分割八、BGP的基本配置一、BGP：边界网关路由协议是一种动态路由协议，且是…...

编程日记 2023/6/2 20:35:39

Electron-Builder Windows系统代码签名

前言项目打包签名是两年前做的了，使用Electron-Bulder，打包工具版本迭代较少，倒是electron版本更新飞快，目前官方推荐使用Electron Forge进行打包，后续再对两者进行对比，重新整理现在的实现方案。签名简…...

编程日记 2023/6/2 20:30:38

数据分析概述

数据分析概述数据的性质数据的概念数据与信息的区别和联系数据的类型按照度量尺度分按时间状况分什么是数据分析数据分析的重要性数据分析的内容数据分析作用数据分析的基本流程典型的数据分析的流程数据分析方法对比分析法分组分析法定量数据分布分析——具体事例结构分…...

编程日记 2023/6/2 20:25:37

网络编程初识

如果这篇有没接触过的知识点，请转到网络编程先导知识_小梁今天敲代码了吗的博客-CSDN博客目录 IPv4和IPv6的概念： 子网掩码默认网关 ping命令端口 OSI网络分层模型 TCP/IP四层模型字节序转换函数 IP地址转换上一篇介绍了网络编程的先导知…...

编程日记 2023/6/2 20:20:36

软考A计划-试题模拟含答案解析-卷十二

点击跳转专栏>Unity3D特效百例点击跳转专栏>案例项目实战源码点击跳转专栏>游戏脚本-辅助自动化点击跳转专栏>Android控件全解手册点击跳转专栏>Scratch编程案例 👉关于作者专注于Android/Unity和各种游戏开发技巧，以及各种资源分享&am…...

编程日记 2023/6/2 20:15:35

I.MX RT1170加密启动详解(1)：Encrypted Boot image组成

使用RT1170芯片构建的所有平台一般都是高端场合，我们需要考虑软件的安全需求。该芯片集成了一系列安全功能。这些特性中的大多数提供针对特定类型攻击的保护，并且可以根据所需的保护程度配置为不同的级别。这些特性可以协同工作，也可以独立工…...

编程日记 2023/6/2 20:10:34

Linux---用户切换命令（su命令、sudo命令、exit命令）

1. su命令 root用户拥有最大的系统操作权限，而普通用户在许多地方的权限是受限的。普通用户的权限，一般在其HOME目录内是不受限的。一旦出了HOME目录，大多数地方，普通用户仅有只读和执行权限，无修改权限。 su 是…...

编程日记 2023/6/2 20:05:33

手机图片怎么提取文字？高效渠道一览

随着智能手机的普及，我们现在可以随时随地使用手机拍照记录生活中的点滴。然而，有时候我们拍照之后可能需要提取图片中的文字，比如拍下的菜谱、公告、名片等等。这时，我们就需要使用手机图片提取文字的功能。 - 采用OCR技术拍照识…...

编程日记 2023/6/2 20:00:31

Elasticsearch 聚合数据结果不精确问题解决方案

Elasticsearch 聚合数据结果不精确背景近期我们项目中出现使用ES聚合某个索引的数据取TOP 10的数据和相同条件下查询所有数据然后按数据量排序取的TOP 10的数据不一致的问题。下面我们简单分析一下这个问题，列出一些常见的解决方案。问题 Elasticsearch分片…...

编程日记 2023/6/2 19:55:30

Qt经典面试题:Qt开启线程的几种方式

方法一：从QThread类派生 ①创建一个类从QThread类派生 ②在子线程类中重写 run 函数, 将处理操作写入该函数中 ③在主线程中创建子线程对象, 启动子线程,调用start()函数这种方法涉及到创建一个从QThread类派生的子类，并在该子类中重写run()函数。处理操…...

编程日记 2023/6/2 19:50:29

使用chartgtp写Android代码

<LinearLayout android:layout_width"match_parent" android:layout_height"match_parent" android:orientation"horizontal"> <TextView android:id"id/姓名" …...

编程日记 2023/6/2 19:45:28

【C++】4.jsoncpp库：jsoncpp库安装与使用入门

😏★,:.☆(￣▽￣)/$:.★ 😏 这篇文章主要介绍jsoncpp的使用。学其所用，用其所学。——梁启超欢迎来到我的博客，一起学习知识，共同进步。喜欢的朋友可以关注一下，下次更新不迷路&am…...

编程日记 2023/6/2 19:40:27

告别旋转锚点！用Oriented R-CNN在DOTA数据集上轻松实现高精度遥感目标检测（附开源代码）

突破传统限制：Oriented R-CNN在遥感目标检测中的实战指南遥感图像中的目标检测一直是计算机视觉领域的难点之一。不同于常规图像中的物体，遥感目标往往以任意角度出现，传统水平边界框检测方法难以准确捕捉其空间位置。想象一下，…...

编程新知 2026/3/31 19:06:26

MMSkeleton部署指南：从开发环境到生产环境的完整迁移

MMSkeleton部署指南：从开发环境到生产环境的完整迁移【免费下载链接】mmskeleton A OpenMMLAB toolbox for human pose estimation, skeleton-based action recognition, and action synthesis. 项目地址: https://gitcode.com/gh_mirrors/mm/mmskeleton MM…...

编程新知 2026/3/31 18:32:07

DAMO-YOLO智能视觉系统作品集：多场景零售货架检测效果惊艳展示

DAMO-YOLO智能视觉系统作品集：多场景零售货架检测效果惊艳展示 1. 零售视觉检测的新标杆走进现代零售空间，商品陈列的艺术背后隐藏着复杂的运营挑战。传统的人工巡检方式已经难以满足快节奏零售环境的需求，这正是DAMO-YOLO智能视觉系统大放…...

编程新知 2026/3/31 18:28:02

春季2021亚马逊研究奖获奖者公布

春季 2021 某机构研究奖获奖者公布 2021年7月，某机构通知申请人已成为2021年春季某机构研究奖的获得者。该奖项旨在为跨多个学科领域开展研究课题的学术研究人员提供无限制资金和某云平台服务积分。今天，我们正式公布26位获奖者，他们来自11个…...

编程新知 2026/3/31 15:02:24

不只是安装：深入理解TI毫米波雷达开发套件（MMWCAS-RF-EVM）的软件生态与数据流

不只是安装：深入理解TI毫米波雷达开发套件（MMWCAS-RF-EVM）的软件生态与数据流毫米波雷达技术正在重塑自动驾驶、工业检测和智能安防等领域，而TI的MMWCAS-RF-EVM评估板作为行业标杆工具，其真正的价值往往被简化为"…...

编程新知 2026/3/31 15:00:17

基于H5的初学开发

目标： 1.能搭出页面 2.能看懂基本标签 3.能做表单 4.能放图片、音频、视频 5.能做简单画布效果 6.能做一个 AI Photo Booth 静态演示页 7.每个实验做完都能看到结果，不容易卡死开发工具：VS Cod 本实验覆盖哪些 H5 内容 1.h…...

编程新知 2026/3/31 14:34:05

智能抢票系统：从技术实现到场景落地

智能抢票系统：从技术实现到场景落地【免费下载链接】Automatic_ticket_purchase 大麦网抢票脚本项目地址: https://gitcode.com/GitHub_Trending/au/Automatic_ticket_purchase 你是否曾遇到这样的场景：苦等数月的演唱会门票在开票瞬间售罄&…...

编程新知 2026/3/31 13:32:56