实现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 相关文章推荐
js parsefloat parseint 转换函数
Jan 21 Javascript
jQuery学习5 jQuery事件模型
Feb 07 Javascript
推荐11款jQuery开发的复选框和单选框美化插件
Aug 02 Javascript
JQuery操作表格(隔行着色,高亮显示,筛选数据)
Feb 23 Javascript
javascript学习笔记之10个原生技巧
May 21 Javascript
JS深度拷贝Object Array实例分析
Mar 31 Javascript
Three.js快速入门教程
Sep 09 Javascript
使用Math.max,Math.min获取数组中的最值实例
Apr 25 Javascript
JS通过调用微信API实现微信支付功能的方法示例
Jun 29 Javascript
JavaScript实现简单图片轮播效果
Aug 21 Javascript
JS数组的高级使用方法示例小结
Mar 14 Javascript
Javascript实现单选框效果
Dec 09 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对字符串的递增运算分析
2010/08/08 PHP
php解析json数据实例
2014/08/19 PHP
php获取、检查类名、函数名、方法名的函数方法
2015/06/25 PHP
PHP和C#可共用的可逆加密算法详解
2015/10/26 PHP
PHP实现清除MySQL死连接的方法
2016/07/23 PHP
laravel创建类似ThinPHP中functions.php的全局函数
2016/11/26 PHP
js鼠标滑轮滚动事件绑定的简单实例(兼容主流浏览器)
2014/01/14 Javascript
js+div实现图片滚动效果代码
2014/02/10 Javascript
jQuery中live()方法用法实例
2015/01/19 Javascript
javascript 实现 原路返回
2015/01/21 Javascript
jQuery版本升级踩坑大全
2016/01/12 Javascript
基于AGS JS开发自定义贴图图层
2017/03/31 Javascript
如何在AngularJs中调用第三方插件库
2017/05/21 Javascript
postman+json+springmvc测试批量添加实例
2018/03/31 Javascript
了解JavaScript函数中的默认参数
2019/05/30 Javascript
JS动态显示倒计时效果
2019/12/12 Javascript
Python通过正则表达式选取callback的方法
2015/07/18 Python
深入剖析Python的爬虫框架Scrapy的结构与运作流程
2016/01/20 Python
Python实现字典去除重复的方法示例
2017/07/31 Python
详解Python 协程的详细用法使用和例子
2018/06/15 Python
对web.py设置favicon.ico的方法详解
2018/12/04 Python
PYQT5设置textEdit自动滚屏的方法
2019/06/14 Python
python Django中models进行模糊查询的示例
2019/07/18 Python
Python基于BeautifulSoup和requests实现的爬虫功能示例
2019/08/02 Python
TensorFlow 输出checkpoint 中的变量名与变量值方式
2020/02/11 Python
解决启动django,浏览器显示“服务器拒绝访问”的问题
2020/05/13 Python
HTML5移动端手机网站开发流程
2016/04/25 HTML / CSS
JD Sports法国:英国篮球和运动时尚的领导者
2017/09/28 全球购物
西班牙美妆电商:Perfume’s Club(有中文站)
2018/08/08 全球购物
拉夫劳伦爱尔兰官方网站:Ralph Lauren爱尔兰
2020/04/10 全球购物
请解释一下webService? 如何用.net实现webService
2014/06/09 面试题
生产厂长岗位职责
2014/02/21 职场文书
公司会计主管岗位责任制
2014/03/01 职场文书
2014年服务员个人工作总结
2014/12/23 职场文书
Java实现二分搜索树的示例代码
2022/03/17 Java/Android
MySQL详细讲解变量variables的用法
2022/06/21 MySQL