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)
3.4 KiB
Vue compatibility
Docsify allows Vue.js 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:
<!-- 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.
<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:
Say Hello
- {{ i }}
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.
<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>
<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:
{{ message }}
Say Hello
- {{ counter }} +
!> 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 is a Vue component that provides a live editor and preview for Vue content. See the vuep documentation for details.
Add Vuep CSS and JavaScript to your index.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):
<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>