VuePressVuePress
  • 介绍
  • 快速上手
  • 配置
  • 页面
  • Markdown
  • 静态资源
  • 多语言支持
  • 部署
  • 主题
  • 插件
  • 打包工具
  • 从 v1 迁移
  • 常见问题
  • 核心

    • 命令行接口
    • 配置
    • Frontmatter
    • 内置组件
    • 插件 API
    • 主题 API
    • 客户端 API
    • Node API
  • 打包工具

    • Vite
    • Webpack
  • 生态系统

    • 默认主题
    • 插件
  • 深入

    • 架构
    • 开发插件
    • 开发主题
    • Cookbook
  • 其他资源

    • 生态系统
    • 市场
    • 贡献指南
  • 更新日志
  • v1.x
  • v0.x
  • English
  • 简体中文
GitHub
  • 介绍
  • 快速上手
  • 配置
  • 页面
  • Markdown
  • 静态资源
  • 多语言支持
  • 部署
  • 主题
  • 插件
  • 打包工具
  • 从 v1 迁移
  • 常见问题
  • 核心

    • 命令行接口
    • 配置
    • Frontmatter
    • 内置组件
    • 插件 API
    • 主题 API
    • 客户端 API
    • Node API
  • 打包工具

    • Vite
    • Webpack
  • 生态系统

    • 默认主题
    • 插件
  • 深入

    • 架构
    • 开发插件
    • 开发主题
    • Cookbook
  • 其他资源

    • 生态系统
    • 市场
    • 贡献指南
  • 更新日志
  • v1.x
  • v0.x
  • English
  • 简体中文
GitHub
  • 深入

    • 架构
    • 开发插件
    • 开发主题
  • Cookbook

    • 介绍
    • 客户端配置的使用方法
    • 添加额外页面
    • 开发一个可继承的主题
    • 向客户端代码传递数据
    • Markdown 与 Vue SFC
    • 解析路由

Markdown 与 Vue SFC

每一个 Markdown 文件,首先都会编译为 HTML ,然后转换为一个 Vue 单文件组件 (SFC) 。换句话说,你可以像写 Vue SFC 一样来写 Markdown 文件:

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

注意

由于 Vue 单文件组件只能包含一个 <script> 标签,你应该避免在 VuePress Markdown 中使用多于一个 <script> 标签。

我们来看一个例子:

输入

markdown-and-vue-sfc.md
_你好, {{ msg }}_

<RedDiv>

_当前计数为: {{ count }}_

</RedDiv>

<button @click="count++">点我!</button>

<script setup>
import { h, ref } from 'vue'

const RedDiv = (_, ctx) =>
  h(
    'div',
    {
      class: 'red-div',
    },
    ctx.slots.default(),
  )
const msg = 'Markdown 中的 Vue'
const count = ref(0)
</script>

<style>
.red-div {
  color: red;
}
</style>

输出

你好, Markdown 中的 Vue

当前计数为: 0

在 GitHub 上编辑此页
上次更新: 2024/1/3 06:15
贡献者: meteorlxy, Mr.Hope, Xinyu Liu
Prev
向客户端代码传递数据
Next
解析路由