实现Vue的markdown文档可以在线运行的方法示例


Posted in Javascript onDecember 11, 2018

markdown 文档中Vue代码 可执行啦,而且可以边看边执行。这样就可以用markdown文档的形式,写自己的Vue博客了, 可以方便介绍自己的原创组件,很酷的执行。

Github

https://github.com/zhangKunUserGit/vue-markdown-run

DEMO

https://zhangkunusergit.github.io/vue-markdown-run/dist/

安装

npm install vue-markdown-run --save

用法

(1)完整引入

// 引入
import MarkdownRun from 'vue-markdown-run';
// 全局注入
Vue.use(MarkdownRun);

(2)按需引入

借助 babel-plugin-component ,我们可以只引入需要的组件,以达到减小项目体积的目的。

首先,安装 babel-plugin-component:

npm install babel-plugin-component -save-dev

然后,将 .babelrc 修改为:

{
 "plugins": [
  [
   "component",
   {
    "libraryName": "vue-markdown-run",
    "styleLibraryName": "theme"
   }
  ]
 ]
}

接下来,如果你只需引入部分组件,写入以下内容:

import { MarkdownRun } from 'vue-markdown-run';

export default {
 components: {
  MarkdownRun
 }
}

组件的用法

<markdown-run
  :mark="markdownTxt"
  highlight-style-file-name="github"
  :runClass=""
  :runStyle=""
  @error=""
 />

参数说明

参数 默认值 说明
:mark 必传(String) markdown文本字符串(具体要求请看下面的“markdownTxt 写法要求”)
:scope 非(Object) markdown文本中,引入的组件,如果不想全局引入,可以局部引入,用法请看上面的DEMO
highlight-style-file-name 非(String) 'github' markdown代码部分样式文件名,此处是指定引入那种样式(css)文件 详细请参考:https://highlightjs.org/stati... 中Styles
:runClass 非(String) Vue运行代码处的css样式名称
:runStyle 非(Object) Vue运行代码处的行间样式名称
@error 非(Function) 当前组件执行失败的回调函数

markdownTxt 写法要求

代码中必须指定哪个组件是需要执行的,在上面写上 vue-run , 否则认为是普通文本,不予执行。

vue-run 放在语言类型后面,需要空格,例如:

```html vue-run
<template>
 <div @click="go">Hello, {{name}}! 你可以点击试试</div>
</template>

<script>
 export default {
  data() {
   return {
    name: 'Vue'
   }
  },
 methods: {
   go () {
    alert('点击弹出, 代码vue已执行');
   }
  }
 }
</script>
<style>
 div{
 background-color: red;
 }
</style>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
一个基于jquery的图片切换效果
Jul 06 Javascript
textarea 控制输入字符字节数(示例代码)
Dec 27 Javascript
JS的document.all函数使用示例
Dec 30 Javascript
js获取select标签选中值的两种方式
Jan 09 Javascript
常用Javascript函数与原型功能收藏(必看篇)
Oct 09 Javascript
浅谈js使用in和hasOwnProperty获取对象属性的区别
Apr 27 Javascript
Vue中组件之间数据的传递的示例代码
Sep 08 Javascript
基于vue2.x的电商图片放大镜插件的使用
Jan 22 Javascript
vue v-model动态生成详解
Jun 30 Javascript
Vue+Typescript中在Vue上挂载axios使用时报错问题
Aug 07 Javascript
axios 实现post请求时把对象obj数据转为formdata
Oct 31 Javascript
如何在现代JavaScript中编写异步任务
Jan 31 Javascript
JS中使用new Option()实现时间联动效果
Dec 10 #Javascript
vue刷新页面时去闪烁提升用户体验效果的实现方法
Dec 10 #Javascript
移动端如何用下拉刷新的方式实现上拉加载
Dec 10 #Javascript
vue+Element-ui实现分页效果实例代码详解
Dec 10 #Javascript
JQuery实现ajax请求的示例和注意事项
Dec 10 #jQuery
微信小程序实现动态获取元素宽高的方法分析
Dec 10 #Javascript
PM2自动部署代码步骤流程总结
Dec 10 #Javascript
You might like
php数据库连接
2006/10/09 PHP
最令PHP初学者们头痛的十四个问题
2007/01/15 PHP
php REMOTE_ADDR之获取访客IP的代码
2008/04/22 PHP
初次接触php抽象工厂模式(Elgg)
2010/03/21 PHP
Smarty模板变量调节器用法分析
2016/05/23 PHP
优秀js开源框架-jQuery使用手册(1)
2007/03/10 Javascript
Firefox getBoxObjectFor getBoundingClientRect联系
2008/10/26 Javascript
jquery中one()方法的用法实例
2015/01/16 Javascript
使用js复制链接中的部分文字的方法
2015/07/30 Javascript
jquery.fastLiveFilter.js实现输入自动过滤的方法
2015/08/11 Javascript
JavaScript统计字符串中每个字符出现次数完整实例
2016/01/28 Javascript
Javascript的表单与验证-非空验证
2016/03/18 Javascript
javascript实现简单的on事件绑定
2016/08/23 Javascript
jquery单击文字或图片内容放大并居中显示
2017/06/23 jQuery
Vuex 进阶之模块化组织详解
2018/01/12 Javascript
VueCli3构建TS项目的方法步骤
2018/11/07 Javascript
Vue实现返回顶部按钮实例代码
2020/10/21 Javascript
分享一下如何编写高效且优雅的 Python 代码
2017/09/07 Python
Python2.X/Python3.X中urllib库区别讲解
2017/12/19 Python
快速查询Python文档方法分享
2017/12/27 Python
Python socket实现简单聊天室
2018/04/01 Python
Python聊天室程序(基础版)
2018/04/01 Python
python print出共轭复数的方法详解
2019/06/25 Python
python Event事件、进程池与线程池、协程解析
2019/10/25 Python
python能在浏览器能运行吗
2020/06/17 Python
python3.8.3安装教程及环境配置的详细教程(64-bit)
2020/11/28 Python
5分钟实现Canvas鼠标跟随动画背景
2019/11/18 HTML / CSS
机械制造与自动化应届生求职信
2013/11/16 职场文书
全民健身日活动方案
2014/01/29 职场文书
《木笛》教学反思
2014/03/01 职场文书
人事行政经理岗位职责
2014/06/18 职场文书
2014年单位法制宣传日活动总结
2014/11/01 职场文书
十七岁的单车观后感
2015/06/12 职场文书
Java网络编程之UDP实现原理解析
2021/09/04 Java/Android
Win11如何启用启动修复 ? Win11执行启动修复的三种方法
2022/04/08 数码科技
排查Tomcat进程假死的问题
2022/05/06 Servers