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

vue3官方示例-简单的 markdown 编辑器。

news 2026/4/2 15:14:03

官方示例不能直接粘贴使用，故自己补了些代码。方便初学者学习，节省时间，提高学习效率。

1、html代码：

<!doctype html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>20-vue3- markdown 编辑器.html</title>
<!--    加载项，可以本地加载，也可网联加载（用ai提示生成网联代码）--><script src="./dist/vue.global.js"></script><script src="./lodash/lodash.js"></script><script src="./marked/marked.min.js"></script><script>// 动态标题var dynamicTitle = "20-vue3- markdown 编辑器.html".slice(0, -5);// 使用 JavaScript 修改 <title> 标签的内容document.title = dynamicTitle;</script>
</head>
<body><div id="app"><h1>{{input}}</h1><h1>{{output}}</h1>
<!--@keyup.enter="update" 在textarea的内容输入后，按enter按键触发 update方法--><div class="editor"><textarea class="input" :value="input" @keyup.enter="update"></textarea><div class="output" v-html="output"></div></div></div><script type="module">const { createApp, ref,computed } = Vue// marked 把textarea的内容进行解析，并返回html格式。// 如：“# hello” 会被解析为“<h1>hello</h1>”const { parse} = marked// lodash的debounce函数，防抖函数，单位为毫秒，默认为1000毫秒即1秒// 如：如这例子中，在1秒内，输入了多次，最终只会执行一次。const {debounce} = _createApp({components:{},setup() {const input = ref('# hello')const output = computed(()=>{return parse(input.value)})const update = debounce((e) => {input.value = e.target.value}, 1000)return {input,output,update}}}).mount('#app')</script></body>
</html>

2、结果：

                ​​​​​​​        ​​​​​​​        ​​​​​​​

相关文章：

vue3官方示例-简单的 markdown 编辑器。

官方示例不能直接粘贴使用&#xff0c;故自己补了些代码。方便初学者学习&#xff0c;节省时间&#xff0c;提高学习效率。 1、html代码&#xff1a; <!doctype html> <html lang"en"> <head><meta charset"UTF-8"><meta nam…...

编程日记 2024/11/2 4:54:03

Linux标准I/O库汇总整理

Linux标准I/O库&#xff08;Standard I/O Library&#xff09;是C标准库的一部分&#xff0c;提供了一系列用于文件输入输出的高级接口。这些接口通常比低级别的系统调用更易于使用&#xff0c;但也可能带来额外的性能开销。下面是Linux标准I/O库的汇总整理&#xff0c;包括常见…...

编程日记 2024/11/2 4:52:01

BGP路由优选+EVPN

BGP 的路由优选规则是一套多步决策链&#xff0c;用来确定在多个可行路由中选择最优的路由。BGP 是一种路径向量协议&#xff0c;通过这些优选规则&#xff0c;网络管理员可以控制数据流量的流向&#xff0c;确保网络的稳定性和效率。下面以一个实例来详细说明 BGP 的优选规则及…...

编程日记 2024/11/2 4:51:00

牛客练习赛131（未补）

A-小H学语文 题意&#xff1a;木板数量为m&#xff0c;想让mmh&#xff08;min)最大&#xff0c;找出这几块木板 分析&#xff1a;让木板从大到小排序&#xff0c;找到最大的体积&#xff0c;将之前的木板按序列输出 代码&#xff1a; #include<bits/stdc.h> using n…...

编程日记 2024/11/2 4:49:59

功能更新丨AI黑科技助燃VR全景新势能

随着VR全景市场需求不断扩大&#xff0c; 为更好地赋能合作商业务发展&#xff0c; 酷雷曼积极推进产品技术迭代&#xff0c; 融合VR虚拟现实和AI人工智能&#xff0c; 重磅推出6大AI黑科技&#xff0c; 让VR全景内容更丰富、创作更加高效&#xff01; 新功能怎么用&#…...

编程日记 2024/11/2 4:46:56

JavaCV学习第一课

1、 JavaCV [1] 是一款基于JavaCPP [2]调用方式&#xff08;JNI的一层封装&#xff09;&#xff0c;由多种开源计算机视觉库组成的包装库&#xff0c;封装了包含FFmpeg、OpenCV、tensorflow、caffe、tesseract、libdc1394、OpenKinect、videoInput和ARToolKitPlus等在内的计算…...

编程日记 2024/11/2 4:44:52

Java第二阶段---16字符串---第一节 String

1.特性介绍 String 类位于 java.lang 包中&#xff0c;无需引入&#xff0c;直接使用即可。 String 类是由 final 修饰的&#xff0c;表示String 类是一个最终类&#xff0c;不能够被继承。 String 类构建的对象不可再被更改 示例 package com.cyx.string;public class Ex…...

编程日记 2024/11/2 4:41:50

＜十六＞Ceph mon 运维

Ceph 集群有故障了&#xff0c;你执行的第一个运维命令是什么&#xff1f; 我猜测是ceph -s 。无论执行的第一个命令是什么&#xff0c;都肯定是先检查Mon。 在开始之前我们有必要介绍下Paxos协议&#xff0c;毕竟Mon就是靠它来实现数据唯一性。 一&#xff1a; Paxos 协议 1…...

编程日记 2024/11/2 4:39:48

【网络安全初识】——互联网发展史

个人主页&#xff1a;兜里有颗棉花糖 欢迎 点赞&#x1f44d; 收藏✨ 留言✉ 加关注&#x1f493;本文由 兜里有颗棉花糖 原创 收录于专栏【网络安全】 本专栏旨在分享学习网络安全的一些学习笔记&#xff0c;欢迎大家在评论区交流讨论&#x1f48c; ipconfig&#xff1a;显示当…...

编程日记 2024/11/2 4:37:45

Windows和Linux内存共享机制

Windows和Linux内存共享机制 引言1.Windows写操作读操作 2.Linux写操作读操作 3.Shell使用 tmux 运行 write 和 read说明 引言 在嵌入式开发领域&#xff0c;内存共享机制作为不同操作系统间实现高效数据交换的重要手段&#xff0c;尤其在对实时性和可靠性要求极高的环境中更为…...

编程日记 2024/11/2 4:36:45

windows@命令行中获取环境变量取值不展开取值(原值)

文章目录 命令行中获取环境变量取值获取不展开的值具体实现注解 封装为函数版本1版本2 命令行中获取环境变量取值 这里主要讨论获取未展开的值本来获取未展开的值应该作为默认选项,至少有合适的api方便直接调用,但是不知道微软怎么想的,让这个任务变得不直接 获取不展开的值 …...

编程日记 2024/11/2 4:35:44

如何找到多平台内容爆款进行批量复刻？

为了进一步扩大品牌社媒影响力&#xff0c;在消费者做决策的时候&#xff0c;能够第一时间出现在首选位置。持续在抖音、小红书、b站、公众号等各大社媒平台&#xff0c;产生连续的、正向的高质量品牌曝光&#xff0c;是非常重要的。如何进行这种多平台品牌影响力的提升呢&…...

编程日记 2024/11/2 4:34:43

【UML】- 用例图（结合银行案例解释其中的奥义）

目录 一、相关介绍 作用&#xff1a; 组成&#xff1a; 关系 二、使用具体银行案例解释各组成部分的含义 1、系统 2、参与者 3、用例 4、关联关系 5、扩展关系 6、泛化&#xff08;继承&#xff09;关系 三、成品 一、相关介绍 作用&#xff1a; 用例图可以描述一个…...

编程日记 2024/11/2 4:33:41

浅谈UI自动化

⭐️前言⭐️ 本篇文章围绕UI自动化来展开&#xff0c;主要内容包括什么是UI自动化&#xff0c;常用的UI自动化框架&#xff0c;UI自动化原理等。 &#x1f349;欢迎点赞 &#x1f44d; 收藏 ⭐留言评论 &#x1f349;博主将持续更新学习记录收获&#xff0c;友友们有任何问题…...

编程日记 2024/11/2 4:31:40

三、k8s快速入门之Kubectl 命令基础操作

⭐️创建Pod [rootmaster ~]# kubectl run nginx --imageharbor.tanc.com/library/ngix:latest kubectl run --generatordeployment/apps.v1 is DEPRECATED and will be rmoved in a future version. Use kubectl run --generatorrun-pod/v1 or kbectl create instead. deplo…...

编程日记 2024/11/2 4:29:37

深度学习-BP算法详解

BP&#xff08;Back Propagation&#xff0c;反向传播&#xff09;是训练神经网络的重要算法之一。它通过计算误差并将误差反向传播&#xff0c;以更新神经网络中的权重和偏置&#xff0c;进而使模型更好地拟合数据。 1. BP算法的基本原理 反向传播的基本思想是&#xff1a; …...

编程日记 2024/11/2 4:28:36

Java审计对比工具JaVers使用

最近有个需求&#xff0c;需要将页面的内容生成excel或者word文档&#xff0c;而且每次的修改都需要生成新的版本&#xff0c;同时需要记录每次修改变化的内容。我们会把每次的修改的内容提交赋值给一个java对象&#xff0c;同时存储到数据库一条新数据&#xff0c;对应数据表一…...

编程日记 2024/11/2 4:27:35

unity中预制体的移动-旋转-放缩

unity中预制体的移动-旋转-放缩 左上侧竖栏图标介绍Tools(手形工具)Move Tool(移动工具&#xff0c;单位米)Rotate Tool(旋转工具&#xff0c;单位角度)Scale Tool(缩放工具&#xff0c;单位倍数)Rect Tool(矩形工具)Transform Tool(变换工具)图标快捷键对照表工具使用的小技巧…...

编程日记 2024/11/2 4:26:34

【压力测试】如何确定系统最大并发用户数？

一、明确测试目的与了解需求 明确测试目的&#xff1a;首先需要明确测试的目的&#xff0c;即为什么要确定系统的最大并发用户数。这通常与业务需求、系统预期的最大用户负载以及系统的稳定性要求相关。 了解业务需求&#xff1a;深入了解系统的业务特性&#xff0c;包括用户行…...

编程日记 2024/11/2 4:24:32

ubuntu常用基本指令简记

一、在线帮助 1、help Linux命令可以分为内部命令和外部命令&#xff0c;内部命令就是由Linux默认Shell-bash提供的命令&#xff0c;而非bash提供的命令就是外部命令。 对于内部命令&#xff0c;可以使用help命令来获取帮助 形式为 help 指令 2、man 在日常使用中碰到的绝…...

编程日记 2024/11/2 4:23:30

CodeSys自定义HTML5控件：从零构建到工程部署的实战指南

1. 为什么需要自定义HTML5控件&#xff1f; 在工业自动化领域&#xff0c;CodeSys作为主流的PLC编程环境&#xff0c;其WebVisu功能允许工程师创建可视化界面。但默认控件库往往无法满足特定需求&#xff0c;比如&#xff1a; 需要展示实时数据曲线图而非简单数值要求特殊交互…...

编程新知 2026/4/2 14:56:29

手把手排查 DeepSpeed CPUAdam 报错：从 AttributeError 到成功编译 Op 的完整日志分析

深度解析DeepSpeed CPUAdam编译报错&#xff1a;从日志分析到精准修复 当你第一次看到AttributeError: DeepSpeedCPUAdam object has no attribute ds_opt_adam这个错误时&#xff0c;可能会感到困惑。这个错误背后隐藏着DeepSpeed框架中CPUAdam优化器与CUDA环境之间复杂的交互…...

编程新知 2026/4/2 14:48:24

Captain AI帮你一次过审，上品不再被驳回！

Ozon上品审核驳回、上架后违规下架&#xff0c;是90%以上卖家都踩过的坑。很多卖家遇到上品问题&#xff0c;会用DeepSeek等通用AI查询规则&#xff0c;却往往因为信息滞后、规则解读错误&#xff0c;反复修改仍无法过审&#xff0c;白白错过新品流量黄金期。一、Captain AI能帮…...

编程新知 2026/4/2 14:42:15

街道办管理系统|基于springboot + vue街道办管理系统(源码+数据库+文档)

街道办管理系统 目录 基于springboot vue街道办管理系统 一、前言 二、系统功能演示 三、技术选型 四、其他项目参考 五、代码参考 六、测试参考 七、最新计算机毕设选题推荐 八、源码获取&#xff1a; 基于springboot vue街道办管理系统 一、前言 博主介绍&#x…...

编程新知 2026/4/2 13:50:50

告别云服务器开销：手把手教你用Docker Compose在本地Linux虚拟机部署Dify

告别云服务器开销&#xff1a;手把手教你用Docker Compose在本地Linux虚拟机部署Dify 在云计算成本不断攀升的今天&#xff0c;越来越多的独立开发者和小团队开始寻求更经济高效的解决方案。对于数据敏感型项目或内部测试环境而言&#xff0c;本地化部署不仅能显著降低长期运营…...

编程新知 2026/4/2 12:54:14

Windows Cleaner终极指南：5分钟彻底解决C盘爆红和系统卡顿问题

Windows Cleaner终极指南&#xff1a;5分钟彻底解决C盘爆红和系统卡顿问题 【免费下载链接】WindowsCleaner Windows Cleaner——专治C盘爆红及各种不服&#xff01; 项目地址: https://gitcode.com/gh_mirrors/wi/WindowsCleaner Windows Cleaner是一款专为Windows系统…...

编程新知 2026/4/2 12:48:11

Qwen3.5-2B保姆级教程：20亿参数模型端侧部署与图文对话实操

Qwen3.5-2B保姆级教程&#xff1a;20亿参数模型端侧部署与图文对话实操 1. 模型简介 Qwen3.5-2B是阿里云推出的轻量化多模态基础模型&#xff0c;属于Qwen3.5系列的小参数版本(20亿参数)。这个模型专为低功耗、低门槛部署场景设计&#xff0c;特别适合在端侧和边缘设备上运行…...

编程新知 2026/4/2 11:20:35

MT管理器安卓版，APK逆向修改神器，APP提取APK教程。

今天算是比较郁闷的一天&#xff0c;作为互联网上算是最老的一批写用户&#xff0c;如果你是带人学习互联网的大佬&#xff0c;估计你都会放弃我这种年龄段的人&#xff0c;不过我还是活下来了&#xff0c;像我们这样的80、90后还有一大批活下来了。 AI出来了给人的引影响很大…...

编程新知 2026/4/2 11:02:25

高效漫画收藏解决方案：打造你的离线数字漫画库

高效漫画收藏解决方案&#xff1a;打造你的离线数字漫画库 【免费下载链接】picacomic-downloader 哔咔漫画 picacomic pica漫画 bika漫画 PicACG 多线程下载器&#xff0c;带图形界面 带收藏夹&#xff0c;已打包exe 下载速度飞快 项目地址: https://gitcode.com/gh_mirrors…...

编程新知 2026/4/2 9:39:16

告别卡顿！Llama-3.2V-11B-cot双卡优化版，流畅体验11B大模型的视觉推理

告别卡顿&#xff01;Llama-3.2V-11B-cot双卡优化版&#xff0c;流畅体验11B大模型的视觉推理 还在为多模态大模型运行卡顿而烦恼&#xff1f;今天要介绍的Llama-3.2V-11B-cot双卡优化版&#xff0c;将彻底改变你对11B参数大模型的认知。这个经过深度优化的视觉推理工具&#…...

编程新知 2026/4/2 7:47:26