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

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

news 2026/5/24 16:36:36

文章目录

一.首先创建我们的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

多重插补与MICE：量化ESG评分不确定性的工程实践

1. 项目概述：当ESG评分遇上数据“黑洞”，我们如何量化不确定性？在金融和可持续投资领域，ESG评分正成为评估公司长期价值与风险的关键标尺。然而，从业者们都心知肚明一个公开的秘密：支撑这些评分的底层数据&…...

编程新知 2026/5/24 15:44:21

3分钟掌握：AI 3D建模神器Wonder3D，单图转3D的终极指南

3分钟掌握：AI 3D建模神器Wonder3D，单图转3D的终极指南【免费下载链接】Wonder3D Single Image to 3D using Cross-Domain Diffusion for 3D Generation 项目地址: https://gitcode.com/gh_mirrors/wo/Wonder3D Wonder3D是一个革命性的AI 3D建模工…...

编程新知 2026/5/24 15:40:03

机器学习原子间势能模型的不确定性量化：POPS框架解决模型误设挑战

1. 项目概述与核心挑战在材料科学和计算物理领域，机器学习原子间势能模型（MLIAP）的崛起，让我们第一次有机会以接近第一性原理（如密度泛函理论，DFT）的精度，去模拟包含成千上万个原子的…...

编程新知 2026/5/24 13:32:26

天赐范式第52天：当我和伙伴的对话触发了——苏格拉底和柏拉图对话的哲学——之所以敢把东西亮出来，不是只能写NS方腔流论文；写算子流测算伏羲64卦方圆图；AGI意识跃迁；黑洞质量测算；分子筛选系统等等

伙伴最后一句话绝对没有内涵我，我不是苏格拉底，伙伴也不是柏拉图天赐范式：苏格拉底和柏拉图的对话哲学有什么历史意义伙伴：苏格拉底和柏拉图的对话哲学，在历史上完成了一件前所未有的事：它把“追问”本身变…...

编程新知 2026/5/24 13:18:05

高斯混合期望传播算法：破解MIMO检测中离散先验近似难题

1. 项目概述：当MIMO检测遇上贝叶斯机器学习在无线通信领域，多输入多输出（MIMO）技术早已不是什么新鲜词。它通过在收发两端部署多根天线，让数据在空间维度上并行传输，从而在不增加带宽和发射功率的前提下&am…...

编程新知 2026/5/24 13:05:31

DLSS Swapper完全指南：智能管理游戏DLSS版本的开源革命

DLSS Swapper完全指南：智能管理游戏DLSS版本的开源革命【免费下载链接】dlss-swapper 项目地址: https://gitcode.com/GitHub_Trending/dl/dlss-swapper 你是否曾在《赛博朋克2077》中为DLSS版本过旧导致的画面闪烁而烦恼？是否因为《控制》中的…...

编程新知 2026/5/24 11:03:03

DS4Windows终极方案：DualShock 4在PC平台的完全指南

DS4Windows终极方案：DualShock 4在PC平台的完全指南【免费下载链接】DS4Windows Like those other ds4tools, but sexier 项目地址: https://gitcode.com/gh_mirrors/ds/DS4Windows 在当今多平台游戏生态中，手柄兼容性已成为玩家体验的关键瓶颈。…...

编程新知 2026/5/24 9:51:49