兼容 Vue

你可以直接在 Markdown 文件里写 Vue 代码，它将被执行。我们可以用它写一些 Vue 的 Demo 或者示例代码。

基础用法

在 index.html 里引入 Vue。

  1. <script src="//unpkg.com/vue"></script>
  2. <script src="//unpkg.com/docsify"></script>

接着就可以愉快地在 Markdown 里写 Vue 了。默认会执行 new Vue({ el: '#main' }) 创建示例。

README.md

  1. # Vue 介绍
  3. `v-for` 的用法
  5. ```html
  6. <ul>
  7.   <li v-for="i in 10">{{ i }}</li>
  8. </ul>
  9. ``
  11. <ul>
  12.   <li v-for="i in 10">{{ i }}</li>
  13. </ul>

当然你也可以手动初始化 Vue，这样你可以自定义一些配置。

README.md

  1. # Vue 的基本用法
  3. <div>hello {{ msg }}</div>
  5. <script>
  6.   new Vue({
  7.     el: '#main',
  8.     data: { msg: 'Vue' }
  9.   })
  10. </script>

!> 一个 Markdown 文件里只有第一个 script 标签内的内容会被执行。

搭配 Vuep 写 Playground

Vuep 是一个提供在线编辑和预览效果的 Vue 组件，搭配 docsify 可以直接在文档里写 Vue 的示例代码，支持 Vue component spec 和 JSX。

index.html

  1. <!-- inject css file -->
  2. <link rel="stylesheet" href="//unpkg.com/vuep/dist/vuep.css">
  4. <!-- inject javascript file -->
  5. <script src="//unpkg.com/vue"></script>
  6. <script src="//unpkg.com/vuep"></script>
  7. <script src="//unpkg.com/docsify"></script>
  9. <!-- or use the compressed files -->
  10. <script src="//unpkg.com/vue/dist/vue.min.js"></script>
  11. <script src="//unpkg.com/vuep/dist/vuep.min.js"></script>
  12. <script src="//unpkg.com/docsify/lib/docsify.min.js"></script>

README.md

  1. # Vuep 使用
  3. <vuep template="#example"></vuep>
  5. <script v-pre type="text/x-template" id="example">
  6.   <template>
  7.     <div>Hello, {{ name }}!</div>
  8.   </template>
  10.   <script>
  11.     module.exports = {
  12.       data: function () {
  13.         return { name: 'Vue' }
  14.       }
  15.     }
  16.   </script>
  17. </script>

?> 具体效果参考 Vuep 文档。