9.3 KiB

Raw Permalink Blame History

兼容 Vue

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

首先，将 Vue2.x 或 3.x 添加到你的index.html文件中。

为你的站点选择合适的生产版本或开发版本，以获得有用的控制台警告和 Vue.js devtools 支持。

Vue 2.x

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

Vue 3.x

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

模板语法

Vue模板语法用于创建动态内容。无需额外的配置，这种语法提供了一些有用的功能，如支持 JavaScript表达式和 Vue指令的循环和条件渲染。

<!-- 在docsify中隐藏，在其他地方显示（如GitHub）。 -->
<p v-if="false">Text for GitHub</p>

<!-- Sequenced content (i.e. loop)-->
<ul>
  <li v-for="i in 3">Item {{ i }}</li>
</ul>

<!-- JavaScript expressions -->
<p>2 + 2 = {{ 2 + 2 }}</p>

Text for GitHub

Item {{ i }}

2 + 2 = {{ 2 + 2 }}

在GitHub上查看输出

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

Data

{
  data() {
    return {
      message: 'Hello, World!'
    };
  }
}

<!-- 在docsify中显示消息，在其他地方显示 "{{ message }}"（例如GitHub） -->
{{ message }}

<!-- 在docsify中显示消息，在其他地方隐藏（例如GitHub） -->
<p v-text="message"></p>

<!-- 在docsify中显示消息，在其他地方显示 text（例如GitHub） -->
<p v-text="message">Text for GitHub</p>

Text for GitHub

在GitHub上查看输出

Computed properties

{
  computed: {
    timeOfDay() {
      const date = new Date();
      const hours = date.getHours();

      if (hours < 12) {
        return 'morning';
      }
      else if (hours < 18) {
        return 'afternoon';
      }
      else {
        return 'evening'
      }
    }
  },
}

Good {{ timeOfDay }}!

Good {{ timeOfDay }}!

Methods

{
  data() {
    return {
      message: 'Hello, World!'
    };
  },
  methods: {
    hello() {
      alert(this.message);
    }
  },
}

<button @click="hello">Say Hello</button>

Say Hello

Lifecycle Hooks

{
  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' },
// ];

<div style="display: flex;">
  <figure style="flex: 1;">
    <img v-for="image in images" :src="image.url" :title="image.title">
    <figcaption>{{ image.title }}</figcaption>
  </figure>
</div>

Global options

使用vueGlobalOptions来指定 Vue options ，用于未明确挂载vueMounts、vueComponents或markdown脚本的Vue内容。对全局data的更改将持续存在，并反映在任何使用全局引用的地方。

window.$docsify = {
  vueGlobalOptions: {
    data() {
      return {
        count: 0,
      };
    },
  },
};

<p>
  <button @click="count -= 1">-</button>
  {{ count }}
  <button @click="count += 1">+</button>
</p>

- {{ count }} +

请注意当多个全局计数器呈现时的行为：

- {{ count }} +

对一个计数器的更改会影响两个计数器。这是因为两个实例都引用了相同的全局count值。现在，导航到一个新的页面，并返回本节，查看对全局数据的更改如何在页面加载之间持久化。

Mounts

使用vueMounts来指定要挂载为 Vue实例的DOM元素及其相关选项。挂载元素使用 CSS选择器作为键，并使用一个包含Vue选项的对象作为其值。每次加载新页面时，Docsify将挂载主内容区域中第一个匹配的元素。挂载元素data对每个实例来说都是唯一的，并且在用户浏览网站时不会持久。

window.$docsify = {
  vueMounts: {
    '#counter': {
      data() {
        return {
          count: 0,
        };
      },
    },
  },
};

<div id="counter">
  <button @click="count -= 1">-</button>
  {{ count }}
  <button @click="count += 1">+</button>
</div>

- {{ count }} +

Components

使用vueComponents创建和注册全局Vue组件。组件是以组件名称为键，以包含Vue选项的对象为值来指定的。组件data对每个实例来说都是唯一的，并且在用户浏览网站时不会持久存在。

window.$docsify = {
  vueComponents: {
    'button-counter': {
      template: `
        <button @click="count += 1">
          You clicked me {{ count }} times
        </button>
      `,
      data() {
        return {
          count: 0,
        };
      },
    },
  },
};

<button-counter></button-counter>
<button-counter></button-counter>

Markdown script

Vue内容可以使用 Markdown 页面中的<script>标签进行挂载。

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

<!-- Vue 2.x  -->
<script>
  new Vue({
    el: '#example',
    // Options...
  });
</script>

<!-- Vue 3.x  -->
<script>
  Vue.createApp({
    // Options...
  }).mount('#example');
</script>

Technical Notes

Docsify processes Vue content in the following order on each page load:
1. Execute markdown <script>
2. Register global vueComponents
3. Mount vueMounts
4. Auto-mount unmounted vueComponents
5. Auto-mount unmounted Vue template syntax using vueGlobalOptions
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 <p>, <my-component />, and <div> elements will be mounted.
```
<p>{{ foo }}</p>
<my-component />
<div>
  <span>{{ bar }}</span>
  <some-other-component />
</div>
```
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 each page load.

说明

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

9.3 KiB Raw Permalink Blame History Unescape Escape

兼容 Vue

Vue 2.x

Vue 3.x

模板语法

Data

Computed properties

Methods

Lifecycle Hooks

Global options

Mounts

Components

Markdown script

Technical Notes

说明

9.3 KiB

Raw Permalink Blame History