在 Markdown 中使用 vue

浏览器的 API 访问限制

当你在开发一个 VuePress 应用时，由于所有的页面在生成静态 HTML 时都需要通过 Node.js 服务端渲染，因此所有的 Vue 相关代码都应当确保只在 beforeMount 或者 mounted 访问浏览器 / DOM 的 API。

# 模板语法

# 插值

每一个 Markdown 文件将首先被编译成 HTML，接着作为一个 Vue 组件传入 vue-loader，这意味着你可以在文本中使用 Vue 风格的插值：

输入：

{{ 1 + 1 }}

输出：

输入：

<span v-for="i in 3">{{ i }} </span>

输出：

1 2 3

编译后的组件没有私有数据，但可以访问网站的元数据，举例来说：

输入：

{{ $page }}

输出：

{
  "path": "/using-vue.html",
  "title": "Using Vue in Markdown",
  "frontmatter": {}
}

所有在 .vuepress/components 中找到的 *.vue 文件将会自动地被注册为全局的异步组件

你可以直接使用这些组件在任意的 Markdown 文件中（组件名是通过文件名取到的）

<custom-component/>
<MyComponent/>
<Foo-Bar/>

WARNING

请确保一个自定义组件的名字包含连接符或者是 PascalCase，否则，它将会被视为一个内联元素，并被包裹在一个 <p> 标签中，这将会导致 HTML 渲染紊乱，因为 HTML 标准规定， <p> 标签中不允许放置任何块级元素。