脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → Vue Markdown文档

Vue使用Markdown文档的示例

 更新时间：2023年03月31日 09:39:05   作者：yyn_未来可期  
本文主要介绍了Vue使用Markdown文档的示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

今天和家人们分享一下怎么在Vue中使用Markdown，我们在开发博客项目时会经常使用到。

接下来我们直接上代码

1、首先下载mavon-editor

npm install mavon-editor --save

2、main.js中引入

// main.js全局注册
import mavonEditor from 'mavon-editor';
import 'mavon-editor/dist/css/index.css';
// use
Vue.use(mavonEditor);

3、Vue页面使用

<div>
  <mavon-editor ref="md" v-model="form.content" @imgAdd="imgAdd"/>
</div>

<!-- 预览 -->
<div>
  <mavon-editor
      class="md"
      :value="content"
      :subfield="false"
      :defaultOpen="'preview'"
      :toolbarsFlag="false"
      :editable="false"
      :scrollStyle="true"
      :ishljs="true"
  />
</div>

// 绑定@imgAdd event
imgAdd(pos, $file) {
  let $vm = this.$refs.md
  // 第一步.将图片上传到服务器.
  const formData = new FormData();
  formData.append('file', $file);
  axios({
    url: 'http://localhost:9876/sys-file/upload',
    method: 'post',
    data: formData,
    headers: {'Content-Type': 'multipart/form-data'},
  }).then((res) => {
    // 第二步.将返回的url替换到文本原位置![...](./0) -> ![...](url)
    debugger
    $vm.$img2Url(pos, res.data);
  })
}

注意1：

这里本地需要有对应的图片上传方法，要不然图片将无法显示。
http://localhost:9876/sys-file/upload

注意2：

imgAdd方法中还需要引入axios import axios from "axios";

效果如下：

在这里插入图片描述

在这里插入图片描述

 到此这篇关于Vue使用Markdown文档的示例的文章就介绍到这了,更多相关Vue Markdown文档内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • antd Form组件方法getFieldsValue获取自定义组件的值操作

    antd Form组件方法getFieldsValue获取自定义组件的值操作

    这篇文章主要介绍了antd Form组件方法getFieldsValue获取自定义组件的值操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2020-10-10
  • vue实现表单验证小功能

    vue实现表单验证小功能

    这篇文章主要为大家详细介绍了vue实现表单验证小功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2021-09-09
  • Vue3中埋点指令封装详解

    Vue3中埋点指令封装详解

    对于Vue项目来说，如果遇到一个埋点的需求，我们最好的解决方案就是封装一个指令，所以本文就来和大家详细讲讲具体是如何封装埋点指令的吧
    2023-08-08
  • vue2项目使用exceljs多表头导出功能详解

    vue2项目使用exceljs多表头导出功能详解

    ExcelJS是一个用于在Node.js和浏览器中创建、读取和修改Excel文件的强大JavaScript库,下面这篇文章主要给大家介绍了关于vue2项目使用exceljs多表头导出功能的相关资料,需要的朋友可以参考下
    2024-05-05
  • Vue中的methods、computed计算属性和watch监听属性的使用和区别解析

    Vue中的methods、computed计算属性和watch监听属性的使用和区别解析

    这篇文章主要介绍了Vue中的methods、computed计算属性和watch监听属性的使用和区别,本文通过示例代码给大家介绍的非常详细对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2024-01-01
  • vue中前端代理跨域问题实例总结

    vue中前端代理跨域问题实例总结

    前后端分离进行项目开发,跨域问题不可避免,下面这篇文章主要给大家介绍了关于vue中前端代理跨域问题的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下
    2022-04-04
  • vue-cli3+ts+webpack实现多入口多出口功能

    vue-cli3+ts+webpack实现多入口多出口功能

    这篇文章主要介绍了vue-cli3+ts+webpack实现多入口多出口功能，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-05-05
  • vue中使用swiper5方式

    vue中使用swiper5方式

    这篇文章主要介绍了vue中使用swiper5方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2023-05-05
  • Vue中@click.native的使用方法及场景

    Vue中@click.native的使用方法及场景

    在组件中时常看到@click.native,在项目中遇到后,简单介绍下,这篇文章主要给大家介绍了关于Vue中@click.native的使用方法及场景的相关资料,需要的朋友可以参考下
    2023-11-11
  • 浅谈vue.js中v-for循环渲染

    浅谈vue.js中v-for循环渲染

    本篇文章主要介绍了浅谈vue.js中v-for循环渲染，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-07-07

最新评论