在 Markdown 中使用 Vue
在编写 Markdown 文档时可以充分利用 Vue 和 JavaScript 的强大功能!
插值(Interpolation)
每个 Markdown 文件首先会编译为 HTML,然后渲染为 Vue 组件这意味着你可以在文本中使用 Vue 式的插值:
输入:
{{ 1 + 1 }}
输出:
2
Escaping
如果要在文本中禁用 Vue 式插值,可以将其包装在代码块或内联代码中,如下所示:
输入:
```js
const foo = `{{ 安全,这不会被插值!}}`
```
`{{ bar }}` 也是安全的!
输出:
const foo = `{{ 安全,这不会被插值!}}`
{{ bar }}
也是安全的!
使用组件
Docute 在 window
对象上暴露了 Vue
的构造函数,因此你可以使用它来注册全局组件,以便于在 Markdown 文档中使用:
``js {highlight:['6-13']}
Vue.component('ReverseText', {
props: ['text'],
template:
{{ reversedText }}
.reverse-text {
border: 1px solid var(—border-color);
padding: 20px;
font-weight: bold;
border-radius: 4px;
}
`,
computed: {
reversedText() {
return this.text.split(‘’).reverse().join(‘’)
}
}
})
你可能会注意到高亮的部分,由于你不能直接在 Vue template 里使用 `style` 元素,于是我们提供了 `v-style` 组件来作为替代。类似地,我们也提供了 `v-script` 组件。
__输入__:
```markdown
<ReverseText text="hello world" />
输出:
Trade-offs
@
简写语法不能工作
由于标准的 HTML 属性不允许以 @
开头,因此我们使用的 markdown 解析器不会将 v-on
的简写 @
识别为有效的 HTML。非常欢迎大家发起 Pull Request 解决该问题。