V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
qingv
V2EX  ›  Vue.js

Vuep - 一个提供实时编辑并预览功能的组件

  •  1
     
  •   qingv · 2016-12-29 11:07:32 +08:00 · 9073 次点击
    这是一个创建于 2870 天前的主题,其中的信息可能已经有所发展或是发生改变。

    上面这个可是一个「一边编辑一边预览效果的」组件哦,有了它就可以在文档里写 demo 啦,就像 react 官网里的 react playground 一样。支持 Vue 模板语法。

    提供 UMD 和 CommonJS 两个版本,并且自己做了点尝试,结合之前开发的 docsify ——— 一个文档生成工具 —— 可以实现在 Markdown 文件里直接写 Vue 的 demo 。

    # Demo
    
    正常写 markdown 的内容,如果要写 Vue 组件 Demo 只需要这样做 
    
    <vuep template="#demo1"></vuep>
    
    <script type="text/x-template" id="demo1">
    <style>
      .main {
        color: #2c3e50;
      }
      .text {
        color: #4fc08d;
      }
    </style>
    
    <template>
      <div class="main">
        <h2> Hello <span class="text">{{ name }}</span>!</h2>
        <h2>Features</h2>
        <ul>
          <li v-for="text in features">{{ text }}</li>
        </ul>
      </div>
    </template>
    
    <script>
      export default {
        data () {
          return {
            name: 'Vuep',
            features: [
              'Vue component spec',
              'Scoped style',
              'UMD and CommonJS build'
            ]
          }
        }
      }
    </script>
    </script>
    

    具体用法可以参考 Vuep 的文档 😜

    目前尚无回复
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   5708 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 33ms · UTC 03:06 · PVG 11:06 · LAX 19:06 · JFK 22:06
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.