查看“Docsify 兼容 Vue”的源代码


你可以直接在 Markdown 文件里写 Vue 代码，它将被执行。我们可以用它写一些 Vue 的 Demo 或者示例代码。

首先，将 Vue[https://vuejs.org 2.x] 或 [https://v3.vuejs.org 3.x] 添加到你的<code>index.html</code>文件中。

为你的站点选择合适的生产版本或开发版本，以获得有用的控制台警告和 [https://github.com/vuejs/vue-devtools Vue.js devtools] 支持。

<span id="vue-2.x"></span>
==== Vue 2.x ====

<pre lang="html"><!-- Production -->
<script src="//cdn.jsdelivr.net/npm/vue@2/dist/vue.min.js"></script>

<!-- Development -->
<script src="//cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script></pre>
<span id="vue-3.x"></span>
==== Vue 3.x ====

<pre lang="html"><!-- Production -->
<script src="//cdn.jsdelivr.net/npm/vue@3/dist/vue.global.prod.js"></script>

<!-- Development -->
<script src="//cdn.jsdelivr.net/npm/vue@3/dist/vue.global.js"></script></pre>
== 模板语法 ==

Vue[https://vuejs.org/v2/guide/syntax.html 模板语法] 用于创建动态内容。无需额外的配置，这种语法提供了一些有用的功能，如支持 [https://vuejs.org/v2/guide/syntax.html#Using-JavaScript-Expressions JavaScript表达式] 和 Vue[https://vuejs.org/v2/guide/syntax.html#Directives 指令] 的循环和条件渲染。

<pre class="markdown">&lt;!-- 在docsify中隐藏，在其他地方显示（如GitHub）。 --&gt;
&lt;p v-if=&quot;false&quot;&gt;Text for GitHub&lt;/p&gt;

&lt;!-- Sequenced content (i.e. loop)--&gt;
&lt;ul&gt;
  &lt;li v-for=&quot;i in 3&quot;&gt;Item {{ i }}&lt;/li&gt;
&lt;/ul&gt;

&lt;!-- JavaScript expressions --&gt;
&lt;p&gt;2 + 2 = {{ 2 + 2 }}&lt;/p&gt;</pre>
<output data-lang="output">
<p v-if="false">
Text for GitHub
</p>
<ul>
<li v-for="i in 3">
Item {{ i }}
</li>
</ul>
<p>
2 + 2 = {{ 2 + 2 }}
</p>
</output>
[https://github.com/docsifyjs/docsify/blob/develop/docs/vue.md#template-syntax 在GitHub上查看输出]

当使用[[#data|data]]、[[#computed-properties|computed properties]]、[[#methods|methods]]和[[#lifecycle-hooks|lifecycle hooks]]时，Vue内容会变得更加有趣。这些选项可以作为[[#global-options|全局选项]]或在DOM中的[[#mounts|mounts]]和[[#components|component]]来指定。

<span id="data"></span>
=== Data ===

<pre lang="js">{
  data() {
    return {
      message: 'Hello, World!'
    };
  }
}</pre>
<!-- prettier-ignore-start -->
<pre class="markdown">&lt;!-- 在docsify中显示消息，在其他地方显示 &quot;{{ message }}&quot;（例如GitHub） --&gt;
{{ message }}

&lt;!-- 在docsify中显示消息，在其他地方隐藏（例如GitHub） --&gt;
&lt;p v-text=&quot;message&quot;&gt;&lt;/p&gt;

&lt;!-- 在docsify中显示消息，在其他地方显示 text（例如GitHub） --&gt;
&lt;p v-text=&quot;message&quot;&gt;Text for GitHub&lt;/p&gt;</pre>
<!-- prettier-ignore-end -->
<output data-lang="output">
{{ message }}

<p v-text="message">
</p>
<p v-text="message">
Text for GitHub
</p>
</output>
[https://github.com/docsifyjs/docsify/blob/develop/docs/vue.md#data 在GitHub上查看输出]

<span id="computed-properties"></span>
=== Computed properties ===

<pre lang="js">{
  computed: {
    timeOfDay() {
      const date = new Date();
      const hours = date.getHours();

      if (hours < 12) {
        return 'morning';
      }
      else if (hours < 18) {
        return 'afternoon';
      }
      else {
        return 'evening'
      }
    }
  },
}</pre>
<pre class="markdown">Good {{ timeOfDay }}!</pre>
<output data-lang="output">
Good {{ timeOfDay }}!

</output>
<span id="methods"></span>
=== Methods ===

<pre lang="js">{
  data() {
    return {
      message: 'Hello, World!'
    };
  },
  methods: {
    hello() {
      alert(this.message);
    }
  },
}</pre>
<pre class="markdown">&lt;button @click=&quot;hello&quot;&gt;Say Hello&lt;/button&gt;</pre>
<output data-lang="output">
<p>
&lt;button @click=“hello”&gt;Say Hello</button>
</p>
</output>
<span id="lifecycle-hooks"></span>
=== Lifecycle Hooks ===

<pre lang="js">{
  data() {
    return {
      images: null,
    };
  },
  created() {
    fetch('https://api.domain.com/')
      .then(response => response.json())
      .then(data => (this.images = data))
      .catch(err => console.log(err));
  }
}

// API response:
// [
//   { title: 'Image 1', url: 'https://domain.com/1.jpg' },
//   { title: 'Image 2', url: 'https://domain.com/2.jpg' },
//   { title: 'Image 3', url: 'https://domain.com/3.jpg' },
// ];</pre>
<pre class="markdown">&lt;div style=&quot;display: flex;&quot;&gt;
  &lt;figure style=&quot;flex: 1;&quot;&gt;
    &lt;img v-for=&quot;image in images&quot; :src=&quot;image.url&quot; :title=&quot;image.title&quot;&gt;
    &lt;figcaption&gt;{{ image.title }}&lt;/figcaption&gt;
  &lt;/figure&gt;
&lt;/div&gt;</pre>
<output data-lang="output">
<div style="display: flex;">

<pre>&lt;figure v-for=&quot;image in images&quot; style=&quot;flex: 1; text-align: center;&quot;&gt;
  &lt;img :src=&quot;image.url&quot;&gt;
  &lt;figcaption&gt;{{ image.title }}&lt;/figcaption&gt;
&lt;/figure&gt;</pre>

</div>
</output>
<span id="global-options"></span>
== Global options ==

使用<code>vueGlobalOptions</code>来指定 [https://vuejs.org/v2/api/#Options-Data Vue options] ，用于未明确挂载[[#mounts|vueMounts]]、[[#components|vueComponents]]或[[#markdown-script|markdown脚本]]的Vue内容。对全局<code>data</code>的更改将持续存在，并反映在任何使用全局引用的地方。

<pre lang="js">window.$docsify = {
  vueGlobalOptions: {
    data() {
      return {
        count: 0,
      };
    },
  },
};</pre>
<pre class="markdown">&lt;p&gt;
  &lt;button @click=&quot;count -= 1&quot;&gt;-&lt;/button&gt;
  {{ count }}
  &lt;button @click=&quot;count += 1&quot;&gt;+&lt;/button&gt;
&lt;/p&gt;</pre>
<output data-lang="output">
<p>
&lt;button @click=“count -= 1”&gt;-</button> {{ count }} &lt;button @click=“count += 1”&gt;+</button>
</p>
</output>
请注意当多个全局计数器呈现时的行为：

<output data-lang="output">
<p>
&lt;button @click=“count -= 1”&gt;-</button> {{ count }} &lt;button @click=“count += 1”&gt;+</button>
</p>
</output>
对一个计数器的更改会影响两个计数器。这是因为两个实例都引用了相同的全局<code>count</code>值。现在，导航到一个新的页面，并返回本节，查看对全局数据的更改如何在页面加载之间持久化。

<span id="mounts"></span>
== Mounts ==

使用<code>vueMounts</code>来指定要挂载为 [https://vuejs.org/v2/guide/instance.html Vue实例] 的DOM元素及其相关选项。挂载元素使用 [https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors CSS选择器] 作为键，并使用一个包含Vue选项的对象作为其值。每次加载新页面时，Docsify将挂载主内容区域中第一个匹配的元素。挂载元素<code>data</code>对每个实例来说都是唯一的，并且在用户浏览网站时不会持久。

<pre lang="js">window.$docsify = {
  vueMounts: {
    '#counter': {
      data() {
        return {
          count: 0,
        };
      },
    },
  },
};</pre>
<pre class="markdown">&lt;div id=&quot;counter&quot;&gt;
  &lt;button @click=&quot;count -= 1&quot;&gt;-&lt;/button&gt;
  {{ count }}
  &lt;button @click=&quot;count += 1&quot;&gt;+&lt;/button&gt;
&lt;/div&gt;</pre>
<output id="counter">
&lt;button @click=“count -= 1”&gt;-</button> {{ count }} &lt;button @click=“count += 1”&gt;+</button>
</output>
<span id="components"></span>
== Components ==

使用<code>vueComponents</code>创建和注册全局[https://vuejs.org/v2/guide/components.html Vue组件] 。组件是以组件名称为键，以包含Vue选项的对象为值来指定的。组件<code>data</code>对每个实例来说都是唯一的，并且在用户浏览网站时不会持久存在。

<pre lang="js">window.$docsify = {
  vueComponents: {
    'button-counter': {
      template: `
        <button @click="count += 1">
          You clicked me {{ count }} times
        </button>
      `,
      data() {
        return {
          count: 0,
        };
      },
    },
  },
};</pre>
<pre class="markdown">&lt;button-counter&gt;&lt;/button-counter&gt;
&lt;button-counter&gt;&lt;/button-counter&gt;</pre>
<output data-lang="output">
<button-counter></button-counter> <button-counter></button-counter>
</output>
<span id="markdown-script"></span>
== Markdown script ==

Vue内容可以使用 Markdown 页面中的<code>&lt;script&gt;</code>标签进行挂载。

!&gt; 只有 Markdown 文件中的第一个<code>&lt;script&gt;</code>标签会被执行。如果你想使用脚本标签挂载多个Vue实例，所有实例必须挂载在Markdown的第一个脚本标签内。

<pre lang="html"><!-- Vue 2.x  -->
<script>
  new Vue({
    el: '#example',
    // Options...
  });
</script></pre>
<pre lang="html"><!-- Vue 3.x  -->
<script>
  Vue.createApp({
    // Options...
  }).mount('#example');
</script></pre>
<span id="technical-notes"></span>
== Technical Notes ==

<ul>
<li><p>Docsify processes Vue content in the following order on each page load:</p>
<ol style="list-style-type: decimal;">
<li>Execute markdown <code>&lt;script&gt;</code></li>
<li>Register global <code>vueComponents</code></li>
<li>Mount <code>vueMounts</code></li>
<li>Auto-mount unmounted <code>vueComponents</code></li>
<li>Auto-mount unmounted Vue template syntax using <code>vueGlobalOptions</code></li></ol>
</li>
<li><p>When auto-mounting Vue content, docsify will mount each top-level element in your markdown that contains template syntax or a component. For example, in the following HTML the top-level <code>&lt;p&gt;</code>, <code>&lt;my-component /&gt;</code>, and <code>&lt;div&gt;</code> elements will be mounted.</p>
<pre lang="html"><p>{{ foo }}</p>
<my-component />
<div>
  <span>{{ bar }}</span>
  <some-other-component />
</div></pre></li>
<li><p>Docsify will not mount an existing Vue instance or an element that contains an existing Vue instance.</p></li>
<li><p>Docsify will automatically destroy/unmount all Vue instances it creates before each page load.</p></li></ul>

== 说明 ==

<ul>
<li><p>Docsify 在每次加载页面时按以下顺序处理Vue内容： 1.执行 Markdown <code>&lt;script&gt;</code> 1.注册全局 <code>vueComponents</code> 1.挂载 <code>vueMounts</code> 1.自动挂载未安装的 <code>vueComponents</code> 1.使用 <code>vueGlobalOptions</code> 自动挂载未安装的Vue模板语法</p></li>
<li><p>自动挂载Vue内容时，docsify将挂载Markdown中包含模板语法或组件的每个顶级元素。例如，在以下HTML中，将安装顶级<code>&lt;p&gt;</code>，<code>&lt;my-component /&gt;</code>和<code>&lt;div&gt;</code>元素。</p>
<pre lang="html"><p>{{ foo }}</p>
<my-component />
<div>
  <span>{{ bar }}</span>
  <some-other-component />
</div></pre></li>
<li><p>Docsify将不会挂载现有Vue实例或包含现有Vue实例的元素。</p></li>
<li><p>Docsify将在每次加载页面之前自动销毁/卸载其创建的所有Vue实例。</p></li></ul>