mirror of
https://github.com/docsifyjs/docsify.git
synced 2025-12-08 19:55:52 +00:00
b135f8417d
- Update docs - Update tests - Add Vue 2 to docs site - Add Vue 2 & 3 dependencies for tests
138 lines
2.9 KiB
Markdown
138 lines
2.9 KiB
Markdown
# Vue compatibility
|
|
|
|
Docsify allows Vue [v2.x](https://vuejs.org) and [v3.x](https://v3.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 or development version of Vue in your `index.html`:
|
|
|
|
#### Vue 2.x
|
|
|
|
```html
|
|
<!-- Production -->
|
|
<script src="//cdn.jsdelivr.net/npm/vue@2/dist/vue.min.js"></script>
|
|
|
|
<!-- Development (debugging and Vue.js devtools support) -->
|
|
<script src="//cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
|
|
```
|
|
|
|
#### Vue 3.x
|
|
|
|
```html
|
|
<!-- Production -->
|
|
<script src="//cdn.jsdelivr.net/npm/vue@3/dist/vue.global.prod.js"></script>
|
|
|
|
<!-- Development (debugging and Vue.js devtools support) -->
|
|
<script src="//cdn.jsdelivr.net/npm/vue@3/dist/vue.global.js"></script>
|
|
```
|
|
|
|
## Basic rendering
|
|
|
|
Docsify will automatically render basic Vue content that does not require `data`, `methods`, or other instance features.
|
|
|
|
```markdown
|
|
<ul>
|
|
<li v-for="i in 3">{{ i }}</li>
|
|
</ul>
|
|
```
|
|
|
|
The HTML above will render the following:
|
|
|
|
<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.
|
|
|
|
<!-- prettier-ignore-start -->
|
|
|
|
```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>
|
|
```
|
|
|
|
<!-- prettier-ignore-end -->
|
|
|
|
#### Vue 2.x
|
|
|
|
```markdown
|
|
<script>
|
|
new Vue({
|
|
el: "#example-1",
|
|
data: function() {
|
|
return {
|
|
counter: 0,
|
|
message: "Hello, World!"
|
|
};
|
|
},
|
|
methods: {
|
|
hello: function() {
|
|
alert(this.message);
|
|
}
|
|
}
|
|
});
|
|
</script>
|
|
```
|
|
|
|
#### Vue 3.x
|
|
|
|
```markdown
|
|
<script>
|
|
Vue.createApp({
|
|
data: function() {
|
|
return {
|
|
counter: 0,
|
|
message: "Hello, World!"
|
|
};
|
|
},
|
|
methods: {
|
|
hello: function() {
|
|
alert(this.message);
|
|
}
|
|
}
|
|
}).mount("#example-1");
|
|
</script>
|
|
```
|
|
|
|
The HTML & JavaScript above will render the following:
|
|
|
|
<!-- prettier-ignore-start -->
|
|
|
|
<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>
|
|
|
|
<!-- prettier-ignore-end -->
|
|
|
|
!> 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.
|
|
|
|
<script>
|
|
new Vue({
|
|
el: "#example-1",
|
|
data: function() {
|
|
return {
|
|
counter: 0,
|
|
message: "Hello, World!"
|
|
};
|
|
},
|
|
methods: {
|
|
hello: function() {
|
|
alert(this.message);
|
|
}
|
|
}
|
|
});
|
|
</script>
|