Skip to content

Files

Latest commit

github-actions[bot]sy-records
github-actions[bot]
and
sy-records
New Crowdin translations by GitHub Action (#59)
May 9, 2025
3fe957d · May 9, 2025

History

History
345 lines (273 loc) · 8.52 KB

vue.md

File metadata and controls

345 lines (273 loc) · 8.52 KB

兼容 Vue

Docsify 允许 Vue.js 内容直接添加到你的 markdown 页面。 这可以极大地简化与数据的工作并将反应添加到你的站点。

Vue template syntax 可以用来将动态内容添加到你的页面。 当使用 data、computed properties、methods 和 lifecycle hooks 时，Vue 内容会变得更加有趣。 这些选项可以指定为 全局选项 或 DOM mounts 和 components。

设置

若要开始，请将 Vue.js 添加到你的 index.html 文件。 为你的站点选择合适的生产版本或开发版本，以获得有用的控制台警告和 Vue.js devtools 支持。

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

模板语法 :id=template-syntax

Vue template syntax 提供了一些有用的功能，例如支持 JavaScript expressions 和 Vue directives 用于循环和条件渲染。

<!-- Hide in docsify, show elsewhere (e.g. 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 上查看输出

代码块 :id=code-blocks

默认情况下，Docsify 忽略代码块中的 Vue 模板语法：

```
{{ message }}
```

要在代码块中处理 Vue 模板语法，请将代码块封装在带有 v-template 属性的元素中：

<div v-template>

```
{{ message }}
```

</div>

数据 :id=data

{
  data() {
    return {
      message: 'Hello, World!'
    };
  }
}
<!-- Show message in docsify, show "{{ message }}" elsewhere (e.g. GitHub)  -->
{{ message }}

<!-- Show message in docsify, hide elsewhere (e.g. GitHub)  -->
<p v-text="message"></p>

{{ message }}

在 GitHub 上查看输出

计算属性 :id=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 }}!

方法 :id=methods

{
  data() {
    return {
      message: 'Hello, World!'
    };
  },
  methods: {
    hello() {
      alert(this.message);
    }
  },
}
<button @click="hello">Say Hello</button>

Say Hello

生命周期钩子 :id=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>
  <figcaption>{{ image.title }}</figcaption>
</figure>

全局选项 :id=global-options

使用 vueGlobalOptions 来指定用于使用 Vue 内容的全局 Vue 选项，这些内容没有被明确挂载 vueMounts、vueComponents 或 markdown 脚本。 对全局 data 的更改将持续存在，并在使用全局引用的任何地方得到反映。

window.$docsify = {
  vueGlobalOptions: {
    data() {
      return {
        count: 0,
      };
    },
  },
};
<p>
  <button @click="count += 1">+</button>
  {{ count }}
  <button @click="count -= 1">-</button>
</p>

+ {{ count }} -

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

+ {{ count }} -

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

挂载 :id=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 }} -

组件 :id=components

使用 vueComponents 创建和注册全局 Vue components。 指定组件时，以组件名称为键，以包含 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 脚本 :id=markdown-script

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

!> 只执行 markdown 文件中的第一个 <script> 标签。 你可以直接在 markdown 文件里写 Vue 代码，它将被执行。我们可以用它写一些 Vue 的 Demo 或者示例代码。

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

技术说明 :id=technical-notes

  • 每次加载页面时，Docsify 都会按以下顺序处理 Vue 内容：
    1. 执行 markdown <script>
    2. 注册全局 vueComponents
    3. 挂载 vueMounts
    4. 自动挂载未挂载的 vueComponents
    5. 使用 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 实例。