• 兼容 Vue
    • 基础用法
    • 搭配 Vuep 写 Playground

    兼容 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 文档。