Skip to content

Latest commit

 

History

History
101 lines (72 loc) · 2.22 KB

vue.md

File metadata and controls

101 lines (72 loc) · 2.22 KB

Compatible con Vue

!> Este archivo aún no está traducido al español, estamos traduciendo... ¡Danos una mano con la traducción!

Puede escribir componentes Vue directamente en el archivo Markdown, y será analizado. Puede usar esta función para escribir una demostración y documentación vue juntos.

Uso básico

Carga VUE en ./index.html.

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

<!-- Or use the compressed files -->
<script src="//unpkg.com/vue/dist/vue.min.js"></script>
<script src="//unpkg.com/docsify/lib/docsify.min.js"></script>

Then you can immediately write Vue code at Markdown file. new Vue({ el: '#main' }) script is executed by default to create instance.

README.md

# Vue guide

`v-for` usage.

```html
<ul>
  <li v-for="i in 10">{{ i }}</li>
</ul>
```

<ul>
  <li v-for="i in 10">{{ i }}</li>
</ul>

You can manually initialize a Vue instance.

README.md

# Vue demo

<div id="main">hello {{ msg }}</div>

<script>
  new Vue({
    el: '#main',
    data: { msg: 'Vue' }
  })
</script>

!> In a Markdown file, only the script within the first script tag is executed.

Combine Vuep to write playground

Vuep is a component for rendering Vue components with live editor and preview. Supports Vue component spec and JSX.

index.html

<!-- Inject css file -->
<link rel="stylesheet" href="//unpkg.com/vuep/dist/vuep.css">

<!-- Inject javascript file -->
<script src="//unpkg.com/vue"></script>
<script src="//unpkg.com/vuep"></script>
<script src="//unpkg.com/docsify"></script>

<!-- or use the compressed files -->
<script src="//unpkg.com/vue/dist/vue.min.js"></script>
<script src="//unpkg.com/vuep/dist/vuep.min.js"></script>
<script src="//unpkg.com/docsify/lib/docsify.min.js"></script>

README.md

# Vuep

<vuep template="#example"></vuep>

<script v-pre type="text/x-template" id="example">
  <template>
    <div>Hello, {{ name }}!</div>
  </template>

  <script>
    module.exports = {
      data: function () {
        return { name: 'Vue' }
      }
    }
  </script>
</script>

?> Example Refer to the Vuep documentation.