Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit b875b33

Browse files
MichaelCurrinMichaelCurrin
committed
feat: Create vue_example
1 parent 08193a6 commit b875b33

File tree

5 files changed

+117
-0
lines changed

5 files changed

+117
-0
lines changed

‎vue_example/README.md

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
# Vue Example
2+
> Demo of how to add Vue.js to your DocsifyJS docs site
3+
4+
Based on tutorial in the DocsifyJS docs - [Compatible with Vue](https://docsify.js.org/#/vue).
5+
6+
See also the [Vue.js homepage](https://vuejs.org/).

‎vue_example/_sidebar.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
- [Basic](basic.md)
2+
- [Manual](manual.md)

‎vue_example/basic.md

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
# Basic
2+
3+
To use Vue, add HTML elements with appropriate Vue.js markers.
4+
5+
For example, see demo of `v-for` usage.
6+
7+
## Code
8+
9+
```html
10+
<ul>
11+
<li v-for="i in 10">{{ i }}</li>
12+
</ul>
13+
```
14+
15+
## Result
16+
17+
<ul>
18+
<li v-for="i in 10">{{ i }}</li>
19+
</ul>

‎vue_example/index.html

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
7+
<meta name="viewport"
8+
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
9+
10+
<title>DocsifyJS Vue Sample</title>
11+
<meta name="description" content="Demo of how to add Vue.js to your DocsifyJS docs site">
12+
13+
<link rel="stylesheet" href="//unpkg.com/docsify/lib/themes/vue.css">
14+
<style>
15+
/* Fix issue on mobile devices where a custom cover image goes off the screen. */
16+
section.cover.show {
17+
height: 100%;
18+
}
19+
20+
</style>
21+
22+
</head>
23+
24+
<body>
25+
<div id="app"></div>
26+
27+
<script>
28+
var repo = 'https://github.com/MichaelCurrin/docsify-js-tutorial'; // TODO: Update.
29+
30+
window.$docsify = {
31+
name: 'DocsifyJS Template', // TODO: Update.
32+
repo: repo,
33+
auto2top: true,
34+
coverpage: false,
35+
loadSidebar: true,
36+
subMaxLevel: 2
37+
}
38+
39+
</script>
40+
41+
<script src="//cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
42+
<script src="//cdn.jsdelivr.net/npm/docsify/lib/docsify.min.js"></script>
43+
44+
<!-- Syntax highlighting -->
45+
<script src="//cdn.jsdelivr.net/npm/prismjs/components/prism-markdown.min.js"></script>
46+
47+
</body>
48+
49+
</html>

‎vue_example/manual.md

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
# Manual
2+
3+
You can manually initialize a Vue instance.
4+
5+
You don't even need to enable script execution in your config.
6+
7+
## Code
8+
9+
<!--
10+
Dev note
11+
12+
Having one code backtick part and one rendered part causes errors, so you have to go for one the other on the page. Putting the code in pre and code tags stops it from executing though (ID is not picked up).
13+
14+
Below is the result copied from the browser (but with the v tag removed on the outer pre tag).
15+
16+
Just be careful not to indent with HTML formatter this or it will display weird.
17+
-->
18+
19+
<pre data-lang="markdown"><code class="lang-markdown"><span class="token title important"><span class="token punctuation">#</span> Vue demo</span>
20+
21+
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>main<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>hello {{ msg }}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
22+
23+
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
24+
<span class="token keyword">new</span> <span class="token class-name">Vue</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
25+
el<span class="token operator">:</span> <span class="token string">'#main'</span><span class="token punctuation">,</span>
26+
data<span class="token operator">:</span> <span class="token punctuation">{</span> msg<span class="token operator">:</span> <span class="token string">'Vue'</span> <span class="token punctuation">}</span>
27+
<span class="token punctuation">}</span><span class="token punctuation">)</span>
28+
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span></code></pre>
29+
30+
## Result
31+
32+
<div id="main">
33+
<i>hello {{ msg }}!</i>
34+
</div>
35+
36+
<script>
37+
new Vue({
38+
el: '#main',
39+
data: { msg: 'world' }
40+
})
41+
</script>

0 commit comments

Comments
 (0)