Add support for Vue shorthand directive syntax

Author: jhildenbiddle

docs/configuration.md

@@ -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>

docs/vue.md

@@ -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,27 +209,27 @@ 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>
 
 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>`.

src/core/render/index.js

@@ -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;
           })

test/e2e/vue.test.js

@@ -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>