Markdown 与 Vue SFC

每一个 Markdown 文件，首先都会编译为 HTML ，然后转换为一个 Vue 单文件组件 (SFC) 。换句话说，你可以把 Markdown 作为 Vue SFC 来看待：

  • <script> 和 <style> 标签会直接被当作 Vue SFC 中的标签。换句话说，它们是从 <template> 标签中提升到了 SFC 的顶层。
  • 所有 <script> 和 <style> 标签的以外的内容，会先被编译为 HTML ，然后被当作 Vue SFC 的 <template> 标签。

我们来看一个例子：

输入

  1. _你好， {{ msg }}_
  3. <RedDiv>
  5. _当前计数为： {{ count }}_
  7. </RedDiv>
  9. <button @click="count++">点我！</button>
  11. <script>
  12. import { h, ref } from 'vue'
  14. const RedDiv = (_, ctx) => h(
  15.   'div',
  16.   {
  17.     class: 'red-div',
  18.   },
  19.   ctx.slots.default()
  20. )
  22. export default {
  23.   components: {
  24.     RedDiv,
  25.   },
  27.   setup() {
  28.     const msg = 'Markdown 中的 Vue'
  29.     const count = ref(0)
  31.     return {
  32.       msg,
  33.       count,
  34.     }
  35.   }
  36. }
  37. </script>
  39. <style>
  40. .red-div {
  41.   color: red;
  42. }
  43. </style>

输出

你好， Markdown 中的 Vue

当前计数为： 0

点我！