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

Skip to content

Commit 9a1935a

Browse files
jhildenbiddlejhildenbiddle
committed
Add support for Vue shorthand directive syntax
1 parent a10fcbd commit 9a1935a

File tree

4 files changed

+47
-30
lines changed

4 files changed

+47
-30
lines changed

‎docs/configuration.md

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -683,17 +683,17 @@ window.$docsify = {
683683

684684
```markdown
685685
<p>
686-
<button v-on:click="count -= 1">-</button>
686+
<button @click="count -= 1">-</button>
687687
{{ count }}
688-
<button v-on:click="count += 1">+</button>
688+
<button @click="count += 1">+</button>
689689
</p>
690690
```
691691

692692
<output data-lang="output">
693693
<p>
694-
<button v-on:click="count -= 1">-</button>
694+
<button @click="count -= 1">-</button>
695695
{{ count }}
696-
<button v-on:click="count += 1">+</button>
696+
<button @click="count += 1">+</button>
697697
</p>
698698
</output>
699699

@@ -719,14 +719,14 @@ window.$docsify = {
719719

720720
```markdown
721721
<div id="counter">
722-
<button v-on:click="count -= 1">-</button>
722+
<button @click="count -= 1">-</button>
723723
{{ count }}
724-
<button v-on:click="count += 1">+</button>
724+
<button @click="count += 1">+</button>
725725
</div>
726726
```
727727

728728
<output id="counter">
729-
<button v-on:click="count -= 1">-</button>
729+
<button @click="count -= 1">-</button>
730730
{{ count }}
731-
<button v-on:click="count += 1">+</button>
731+
<button @click="count += 1">+</button>
732732
</output>

‎docs/vue.md

Lines changed: 15 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -140,8 +140,12 @@ Good {{ timeOfDay }}!
140140
}
141141
```
142142

143+
```markdown
144+
<button @click="hello">Say Hello</button>
145+
```
146+
143147
<output data-lang="output">
144-
<p><button v-on:click="hello">Say Hello</button></p>
148+
<p><button @click="hello">Say Hello</button></p>
145149
</output>
146150

147151
### Lifecycle Hooks
@@ -205,27 +209,27 @@ window.$docsify = {
205209

206210
```markdown
207211
<p>
208-
<button v-on:click="count -= 1">-</button>
212+
<button @click="count -= 1">-</button>
209213
{{ count }}
210-
<button v-on:click="count += 1">+</button>
214+
<button @click="count += 1">+</button>
211215
</p>
212216
```
213217

214218
<output data-lang="output">
215219
<p>
216-
<button v-on:click="count -= 1">-</button>
220+
<button @click="count -= 1">-</button>
217221
{{ count }}
218-
<button v-on:click="count += 1">+</button>
222+
<button @click="count += 1">+</button>
219223
</p>
220224
</output>
221225

222226
Notice the behavior when multiple global counters are rendered:
223227

224228
<output data-lang="output">
225229
<p>
226-
<button v-on:click="count -= 1">-</button>
230+
<button @click="count -= 1">-</button>
227231
{{ count }}
228-
<button v-on:click="count += 1">+</button>
232+
<button @click="count += 1">+</button>
229233
</p>
230234
</output>
231235

@@ -251,16 +255,16 @@ window.$docsify = {
251255

252256
```markdown
253257
<div id="counter">
254-
<button v-on:click="count -= 1">-</button>
258+
<button @click="count -= 1">-</button>
255259
{{ count }}
256-
<button v-on:click="count += 1">+</button>
260+
<button @click="count += 1">+</button>
257261
</div>
258262
```
259263

260264
<output id="counter">
261-
<button v-on:click="count -= 1">-</button>
265+
<button @click="count -= 1">-</button>
262266
{{ count }}
263-
<button v-on:click="count += 1">+</button>
267+
<button @click="count += 1">+</button>
264268
</output>
265269

266270
## Components
@@ -331,4 +335,3 @@ Vue content can mounted using a `<script>` tag in your markdown pages.
331335
- Docsify will not mount an existing Vue instance or an element that contains an existing Vue instance.
332336
- Docsify will automatically destroy/unmount all Vue instances it creates before new page content is loaded.
333337
- 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.
334-
- 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>`.

‎src/core/render/index.js

Lines changed: 21 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -127,8 +127,25 @@ function renderMain(html) {
127127
// Template syntax, vueComponents, vueGlobalOptions
128128
if (docsifyConfig.vueGlobalOptions || vueComponentNames.length) {
129129
const reHasBraces = /{{2}[^{}]*}{2}/;
130-
const reHasDataDirective = /\sv-(bind:|cloak|html=|is=|model=|on:|slot=|text=)/;
131-
const reHasStaticDirective = /\sv-(else|else-if=|for=|if=|once|pre|show=)/;
130+
// Matches Vue full and shorthand syntax as attributes in HTML tags.
131+
//
132+
// Full syntax examples:
133+
// v-foo, v-foo[bar], v-foo-bar, v-foo:bar-baz.prop
134+
//
135+
// Shorthand syntax examples:
136+
// @foo, @foo.bar, @foo.bar.baz, @[foo], :foo, :[foo]
137+
//
138+
// Markup examples:
139+
// <div v-html>{{ html }}</div>
140+
// <div v-text="msg"></div>
141+
// <div v-bind:text-content.prop="text">
142+
// <button v-on:click="doThis"></button>
143+
// <button v-on:click.once="doThis"></button>
144+
// <button v-on:[event]="doThis"></button>
145+
// <button @click.stop.prevent="doThis">
146+
// <a :href="url">
147+
// <a :[key]="url">
148+
const reHasDirective = /<[^>/]+\s([@:]|v-)[\w-:.[\]]+[=>\s]/;
132149

133150
vueMountData.push(
134151
...dom
@@ -145,11 +162,8 @@ function renderMain(html) {
145162
elm.querySelector(vueComponentNames.join(',') || null) ||
146163
// has curly braces
147164
reHasBraces.test(elm.outerHTML) ||
148-
// has data directive
149-
(docsifyConfig.vueGlobalOptions &&
150-
reHasDataDirective.test(elm.outerHTML)) ||
151-
// has static content directive
152-
reHasStaticDirective.test(elm.outerHTML);
165+
// has content directive
166+
reHasDirective.test(elm.outerHTML);
153167

154168
return isVueMount;
155169
})

‎test/e2e/vue.test.js

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -49,19 +49,19 @@ describe('Vue.js Compatibility', function() {
4949
5050
<div id="vueglobaloptions">
5151
<p v-text="msg">---</p>
52-
<button v-on:click="counter += 1">+</button>
52+
<button @click="counter += 1">+</button>
5353
<span>{{ counter }}<span>
5454
</div>
5555
5656
<div id="vuemounts">
5757
<p v-text="msg">---</p>
58-
<button v-on:click="counter += 1">+</button>
58+
<button @click="counter += 1">+</button>
5959
<span>{{ counter }}<span>
6060
</div>
6161
6262
<div id="vuescript">
6363
<p v-text="msg">---</p>
64-
<button v-on:click="counter += 1">+</button>
64+
<button @click="counter += 1">+</button>
6565
<span>{{ counter }}<span>
6666
</div>
6767

0 commit comments

Comments
 (0)