mirror of
https://github.com/docsifyjs/docsify.git
synced 2025-12-08 19:55:52 +00:00
f385e21a1b
- Fix inability to instantiate reactive Vue components by 1) handling each child of #main instead of #main itself and 2) skipping elements that are already Vue instances - Retain previous behavior of processing basic Vue rendering without the need for a markdown <script> tag. - Update documentation and add live Vue examples - Update `index.html` files to include Vue.js and Vuep (CSS+JS)
146 lines
3.4 KiB
Markdown
146 lines
3.4 KiB
Markdown
# Vue compatibility
|
|
|
|
Docsify allows [Vue.js](https://vuejs.org) components to be added directly to you Markdown files. These components can greatly simplify working with data and adding reactivity to your content.
|
|
|
|
To get started, load either the production (minified) or development (unminified) version of Vue in your `index.html`:
|
|
|
|
```html
|
|
<!-- Production (minified) -->
|
|
<script src="//cdn.jsdelivr.net/npm/vue@2/dist/vue.min.js"></script>
|
|
|
|
<!-- Development (unminified, with debugging info via console) -->
|
|
<script src="//cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
|
|
```
|
|
|
|
## Basic rendering
|
|
|
|
Docsify will automatically render basic Vue content that does not require `data`, `methods`, or other instance features.
|
|
|
|
```markdown
|
|
<button v-on:click.native="this.alert('Hello, World!')">Say Hello</button>
|
|
|
|
<ul>
|
|
<li v-for="i in 3">{{ i }}</li>
|
|
</ul>
|
|
```
|
|
|
|
The HTML above will render the following:
|
|
|
|
<button v-on:click="this.alert('Hello, World!')">Say Hello</button>
|
|
|
|
<ul>
|
|
<li v-for="i in 3">{{ i }}</li>
|
|
</ul>
|
|
|
|
## Advanced usage
|
|
|
|
Vue components and templates that require `data`, `methods`, computed properties, lifecycle hooks, etc. require manually creating a new `Vue()` instance within a `<script>` tag in your markdown.
|
|
|
|
```markdown
|
|
<div id="example-1">
|
|
<p>{{ message }}</p>
|
|
|
|
<button v-on:click="hello">Say Hello</button>
|
|
|
|
<button v-on:click="counter -= 1">-</button>
|
|
{{ counter }}
|
|
<button v-on:click="counter += 1">+</button>
|
|
</div>
|
|
```
|
|
|
|
```markdown
|
|
<script>
|
|
new Vue({
|
|
el: "#example-1",
|
|
data: function() {
|
|
counter: 0,
|
|
message: "Hello, World!"
|
|
},
|
|
methods: {
|
|
hello: function() {
|
|
alert(this.message);
|
|
}
|
|
}
|
|
});
|
|
</script>
|
|
```
|
|
|
|
The HTML & JavaScript above will render the following:
|
|
|
|
<div id="example-1">
|
|
<p>{{ message }}</p>
|
|
|
|
<button v-on:click="hello">Say Hello</button>
|
|
|
|
<button v-on:click="counter -= 1">-</button>
|
|
{{ counter }}
|
|
<button v-on:click="counter += 1">+</button>
|
|
</div>
|
|
|
|
!> Only the first `<script>` tag in a markdown file is executed. If you are working with multiple Vue components, all `Vue` instances must be created within this tag.
|
|
|
|
## Vuep playgrounds
|
|
|
|
[Vuep](https://github.com/QingWei-Li/vuep) is a Vue component that provides a live editor and preview for Vue content. See the [vuep documentation](https://qingwei-li.github.io/vuep/) for details.
|
|
|
|
Add Vuep CSS and JavaScript to your `index.html`:
|
|
|
|
```html
|
|
<!-- Vuep CSS -->
|
|
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/vuep/dist/vuep.css">
|
|
|
|
<!-- Vuep JavaScript -->
|
|
<script src="//cdn.jsdelivr.net/npm/vuep/dist/vuep.min.js"></script>
|
|
```
|
|
|
|
Add vuep markup to a markdown file (e.g. `README.md`):
|
|
|
|
```markdown
|
|
<vuep template="#example-2"></vuep>
|
|
|
|
<script v-pre type="text/x-template" id="example-2">
|
|
<template>
|
|
<div>Hello, {{ name }}!</div>
|
|
</template>
|
|
|
|
<script>
|
|
module.exports = {
|
|
data: function() {
|
|
return { name: 'Vue' }
|
|
}
|
|
}
|
|
</script>
|
|
</script>
|
|
```
|
|
|
|
<vuep template="#example-2"></vuep>
|
|
|
|
<script v-pre type="text/x-template" id="example-2">
|
|
<template>
|
|
<div>Hello, {{ name }}!</div>
|
|
</template>
|
|
|
|
<script>
|
|
module.exports = {
|
|
data: function() {
|
|
return { name: 'World' }
|
|
}
|
|
}
|
|
</script>
|
|
</script>
|
|
|
|
<script>
|
|
new Vue({
|
|
el: "#example-1",
|
|
data: {
|
|
counter: 0,
|
|
message: "Hello, World!"
|
|
},
|
|
methods: {
|
|
hello: function() {
|
|
alert(this.message);
|
|
}
|
|
}
|
|
});
|
|
</script>
|