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

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

news 2025/11/2 11:52: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&#xff08;注意绑定&#xff09;APP源代码 效果图&#xff08;按钮功能&#xff09;新增二级菜单&#xff08;v-for&#xff09;需要的可以私信 一.首先创建我们的…...

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

每日算法（第十四期）

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

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

uboot的使用

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

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

学习HCIP的day.09

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

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

Electron-Builder Windows系统代码签名

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

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

数据分析概述

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

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

网络编程初识

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

方法一&#xff1a;从QThread类派生 ①创建一个类从QThread类派生 ②在子线程类中重写 run 函数, 将处理操作写入该函数中 ③在主线程中创建子线程对象, 启动子线程,调用start()函数 这种方法涉及到创建一个从QThread类派生的子类&#xff0c;并在该子类中重写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库安装与使用入门

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

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

JavaSec-RCE

简介 RCE(Remote Code Execution)&#xff0c;可以分为:命令注入(Command Injection)、代码注入(Code Injection) 代码注入 1.漏洞场景&#xff1a;Groovy代码注入 Groovy是一种基于JVM的动态语言&#xff0c;语法简洁&#xff0c;支持闭包、动态类型和Java互操作性&#xff0c…...

编程新知 2025/10/30 10:46:50

Flask RESTful 示例

目录 1. 环境准备2. 安装依赖3. 修改main.py4. 运行应用5. API使用示例获取所有任务获取单个任务创建新任务更新任务删除任务 中文乱码问题&#xff1a; 下面创建一个简单的Flask RESTful API示例。首先&#xff0c;我们需要创建环境&#xff0c;安装必要的依赖&#xff0c;然后…...

编程新知 2025/10/28 12:40:10

React Native在HarmonyOS 5.0阅读类应用开发中的实践

一、技术选型背景 随着HarmonyOS 5.0对Web兼容层的增强&#xff0c;React Native作为跨平台框架可通过重新编译ArkTS组件实现85%以上的代码复用率。阅读类应用具有UI复杂度低、数据流清晰的特点。 二、核心实现方案 1. 环境配置 &#xff08;1&#xff09;使用React Native…...

编程新知 2025/8/19 2:57:37

ElasticSearch搜索引擎之倒排索引及其底层算法

文章目录 一、搜索引擎1、什么是搜索引擎？2、搜索引擎的分类3、常用的搜索引擎4、搜索引擎的特点二、倒排索引1、简介2、为什么倒排索引不用B+树1.创建时间长，文件大。2.其次，树深，IO次数可怕。3.索引可能会失效。4.精准度差。三. 倒排索引四、算法1、Term Index的算法2、 …...

编程新知 2025/10/29 5:13:45

Rust 异步编程

Rust 异步编程 引言 Rust 是一种系统编程语言，以其高性能、安全性以及零成本抽象而著称。在多核处理器成为主流的今天，异步编程成为了一种提高应用性能、优化资源利用的有效手段。本文将深入探讨 Rust 异步编程的核心概念、常用库以及最佳实践。 异步编程基础 什么是异步…...

编程新知 2025/10/20 1:24:05

SpringTask-03.入门案例

一.入门案例 启动类&#xff1a; package com.sky;import lombok.extern.slf4j.Slf4j; import org.springframework.boot.SpringApplication; import org.springframework.boot.autoconfigure.SpringBootApplication; import org.springframework.cache.annotation.EnableCach…...

编程新知 2025/10/31 1:15:07

JVM暂停（Stop-The-World，STW）的原因分类及对应排查方案

JVM暂停（Stop-The-World，STW）的完整原因分类及对应排查方案，结合JVM运行机制和常见故障场景整理而成： 一、GC相关暂停​​ 1. ​​安全点（Safepoint）阻塞​​ ​​现象​​：JVM暂停但无GC日志，日志显示No GCs detected。​​原因​​：JVM等待所有线程进入安全点（如…...

编程新知 2025/10/2 12:07:03

全面解析各类VPN技术：GRE、IPsec、L2TP、SSL与MPLS VPN对比

目录 引言 VPN技术概述 GRE VPN 3.1 GRE封装结构 3.2 GRE的应用场景 GRE over IPsec 4.1 GRE over IPsec封装结构 4.2 为什么使用GRE over IPsec&#xff1f; IPsec VPN 5.1 IPsec传输模式&#xff08;Transport Mode&#xff09; 5.2 IPsec隧道模式&#xff08;Tunne…...

编程新知 2025/10/25 10:20:33

dify打造数据可视化图表

一、概述 在日常工作和学习中&#xff0c;我们经常需要和数据打交道。无论是分析报告、项目展示&#xff0c;还是简单的数据洞察&#xff0c;一个清晰直观的图表&#xff0c;往往能胜过千言万语。 一款能让数据可视化变得超级简单的 MCP Server&#xff0c;由蚂蚁集团 AntV 团队…...

编程新知 2025/10/31 19:40:25

基于matlab策略迭代和值迭代法的动态规划

经典的基于策略迭代和值迭代法的动态规划matlab代码&#xff0c;实现机器人的最优运输 Dynamic-Programming-master/Environment.pdf , 104724 Dynamic-Programming-master/README.md , 506 Dynamic-Programming-master/generalizedPolicyIteration.m , 1970 Dynamic-Programm…...

编程新知 2025/8/3 2:20:04