archive-gh-me/docsify
1
0
Fork 0
mirror of https://github.com/docsifyjs/docsify.git synced 2025-12-08 19:55:52 +00:00
Code Issues Projects Releases Wiki Activity

Add support for Vue shorthand directive syntax

Browse Source
This commit is contained in:
John Hildenbiddle 2020-11-15 13:34:03 -06:00
parent a10fcbd9a6
commit 9a1935ac64
4 changed files with 47 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
docs/configuration.md
View File

@ -683,17 +683,17 @@ window.$docsify = {
```markdown
<p>
<button v-on:click="count -= 1">-</button>
<button @click="count -= 1">-</button>
{{ count }}
<button v-on:click="count += 1">+</button>
<button @click="count += 1">+</button>
</p>
```
<output data-lang="output">
<p>
<button v-on:click="count -= 1">-</button>
<button @click="count -= 1">-</button>
{{ count }}
<button v-on:click="count += 1">+</button>
<button @click="count += 1">+</button>
</p>
</output>
@ -719,14 +719,14 @@ window.$docsify = {
```markdown
<div id="counter">
<button v-on:click="count -= 1">-</button>
<button @click="count -= 1">-</button>
{{ count }}
<button v-on:click="count += 1">+</button>
<button @click="count += 1">+</button>
</div>
```
<output id="counter">
<button v-on:click="count -= 1">-</button>
<button @click="count -= 1">-</button>
{{ count }}
<button v-on:click="count += 1">+</button>
<button @click="count += 1">+</button>
</output>

27
docs/vue.md
View File

@ -140,8 +140,12 @@ Good {{ timeOfDay }}!
}
```
```markdown
<button @click="hello">Say Hello</button>
```
<output data-lang="output">
<p><button v-on:click="hello">Say Hello</button></p>
<p><button @click="hello">Say Hello</button></p>
</output>
### Lifecycle Hooks
@ -205,17 +209,17 @@ window.$docsify = {
```markdown
<p>
<button v-on:click="count -= 1">-</button>
<button @click="count -= 1">-</button>
{{ count }}
<button v-on:click="count += 1">+</button>
<button @click="count += 1">+</button>
</p>
```
<output data-lang="output">
<p>
<button v-on:click="count -= 1">-</button>
<button @click="count -= 1">-</button>
{{ count }}
<button v-on:click="count += 1">+</button>
<button @click="count += 1">+</button>
</p>
</output>
@ -223,9 +227,9 @@ Notice the behavior when multiple global counters are rendered:
<output data-lang="output">
<p>
<button v-on:click="count -= 1">-</button>
<button @click="count -= 1">-</button>
{{ count }}
<button v-on:click="count += 1">+</button>
<button @click="count += 1">+</button>
</p>
</output>
@ -251,16 +255,16 @@ window.$docsify = {
```markdown
<div id="counter">
<button v-on:click="count -= 1">-</button>
<button @click="count -= 1">-</button>
{{ count }}
<button v-on:click="count += 1">+</button>
<button @click="count += 1">+</button>
</div>
```
<output id="counter">
<button v-on:click="count -= 1">-</button>
<button @click="count -= 1">-</button>
{{ count }}
<button v-on:click="count += 1">+</button>
<button @click="count += 1">+</button>
</output>
## Components
@ -331,4 +335,3 @@ Vue content can mounted using a `<script>` tag in your markdown pages.
- Docsify will not mount an existing Vue instance or an element that contains an existing Vue instance.
- Docsify will automatically destroy/unmount all Vue instances it creates before new page content is loaded.
- When processing `vueGlobalOptions`, docsify parses the child elements within the main content area (`#main`) and mounts the element if it contains Vue content. Docsify does not parse each individual node within the main content area.
- When processing `vueGlobalOptions`, docsify will only detect the full `v-` attribute syntax (e.g `v-bind:href` or `v-on:click`). For performance reasons, detection of Vue's [shorthand](https://vuejs.org/v2/guide/syntax.html#Shorthands) attribute syntax (e.g. `:href`or `@click`) is not supported. Shorthand syntax is supported when explicitly mounting Vue content via `vueComponents`, `vueMounts`, or a markdown `<script>`.

28
src/core/render/index.js
View File

@ -127,8 +127,25 @@ function renderMain(html) {
// Template syntax, vueComponents, vueGlobalOptions
if (docsifyConfig.vueGlobalOptions || vueComponentNames.length) {
const reHasBraces = /{{2}[^{}]*}{2}/;
const reHasDataDirective = /\sv-(bind:|cloak|html=|is=|model=|on:|slot=|text=)/;
const reHasStaticDirective = /\sv-(else|else-if=|for=|if=|once|pre|show=)/;
// Matches Vue full and shorthand syntax as attributes in HTML tags.
//
// Full syntax examples:
// v-foo, v-foo[bar], v-foo-bar, v-foo:bar-baz.prop
//
// Shorthand syntax examples:
// @foo, @foo.bar, @foo.bar.baz, @[foo], :foo, :[foo]
//
// Markup examples:
// <div v-html>{{ html }}</div>
// <div v-text="msg"></div>
// <div v-bind:text-content.prop="text">
// <button v-on:click="doThis"></button>
// <button v-on:click.once="doThis"></button>
// <button v-on:[event]="doThis"></button>
// <button @click.stop.prevent="doThis">
// <a :href="url">
// <a :[key]="url">
const reHasDirective = /<[^>/]+\s([@:]|v-)[\w-:.[\]]+[=>\s]/;
vueMountData.push(
...dom
@ -145,11 +162,8 @@ function renderMain(html) {
elm.querySelector(vueComponentNames.join(',') || null) ||
// has curly braces
reHasBraces.test(elm.outerHTML) ||
// has data directive
(docsifyConfig.vueGlobalOptions &&
reHasDataDirective.test(elm.outerHTML)) ||
// has static content directive
reHasStaticDirective.test(elm.outerHTML);
// has content directive
reHasDirective.test(elm.outerHTML);
return isVueMount;
})

6
test/e2e/vue.test.js
View File

@ -49,19 +49,19 @@ describe('Vue.js Compatibility', function() {
<div id="vueglobaloptions">
<p v-text="msg">---</p>
<button v-on:click="counter += 1">+</button>
<button @click="counter += 1">+</button>
<span>{{ counter }}<span>
</div>
<div id="vuemounts">
<p v-text="msg">---</p>
<button v-on:click="counter += 1">+</button>
<button @click="counter += 1">+</button>
<span>{{ counter }}<span>
</div>
<div id="vuescript">
<p v-text="msg">---</p>
<button v-on:click="counter += 1">+</button>
<button @click="counter += 1">+</button>
<span>{{ counter }}<span>
</div>